how to validate on blank input search box

user_17513950 0
Viewed 103

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>
css html jquery javascript
3 Answers

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>
user_30223870

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

user_125159630

If you wrap your inputs in a <form></form> you can use HTML5's built in validation.

In my example:

pattern="[\S]+" means all characters except space are valid

required means the input length must be at least 1 valid character

Also, I'm toggling the button's disabled property based on the input's validity. In my opinion it makes for a better user experience letting the user know something is incorrect BEFORE clicking the button.

let button_search = document.querySelector('button.search');
let input_query = document.querySelector('input.query');

button_search.addEventListener('click', function() {
  if (input_query.validity.valid) {
    window.open('https://www.google.com/search?q=' + input_query.value, '_self');
  }
});

input_query.addEventListener('keyup', function(event) {
  button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid

  if (event.keyCode === 13) {
    button_search.click();
  } 
});
<form>
  <input class="query" pattern="[\S]+" required>
  <button class="search" disabled>Search</button>
</form>

Last thought, unless there is a specific reason you need to run your code in separate scopes, you can put all of your code in a single <script></script>

user_96508030
Related