how to validate on blank input search box-CodePudding

how to get the search input to recognize that there is a string of input? the code below works but even without entering any input it still does the search if I click search or enter. In other words even if the search input is blank it still searches. This is just a project, anyone has any ideas?

<input type="text" id="textInput" name="" class="query">

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function(){
          let url = 'https://www.google.com/search?q=' query.value;
          window.open(url,'_self');
      }
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
              event.preventDefault();
              document.getElementById("searchButton").click();
          }
      });
   </script>

CodePudding user response：

Simply check for a (valid) length, either greather than zero or greater than maybe three characters for any meaningful results (depends on your searches).

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function(){
          if(query.value.trim().length){ // maybe length>3 ?
              let url = 'https://www.google.com/search?q=' query.value;
              window.open(url,'_self');
          }
      }
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
              event.preventDefault();
              document.getElementById("searchButton").click();
          }
      });
   </script>

CodePudding user response：

You have to check if the value of input exists or it is not empty. You can also check:

input.value.length
input.value !== ""
input.value

  let query = document.querySelector('.query');
  let searchBtn = document.querySelector('.searchBtn');

  searchBtn.onclick = function() {
    let url = 'https://www.google.com/search?q='   query.value;
    window.open(url, '_self');
  }

  var input = document.getElementById("textInput");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13 && input.value) {
      event.preventDefault();
      document.getElementById("searchButton").click();
    } 
  });

<input type="text" id="textInput" name="" class="query">
<button class="searchBtn">Search</button>

Working Fiddle