stopPropagation in a button submit when an input text is null

Question

I need to know how can I stopPropagation of a button submit when the input text "criteria" is null or empty using jquery.

<input type="text" name="criteria" id="criteria">
<button type="submit" id="findButton">Find</button>

Any help would be great.

Answer 1

You can subscribe for click event on the button or the submit event of the form tag. Below example shows click of the button and if there is no text inside text box then it prevents the submit by using preventDefault()

$(document).ready(function() {
  $("#findButton").click(function(evt) {    
    if ($("#criteria").val().trim() === '') {
      alert('Empty text box ---> show something to client');
      evt.preventDefault();
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="criteria" id="criteria">
  <button type="submit" id="findButton">Find</button>
</form>