Jquery form submitting before validation

Question

I want to validate a form for inputs with the 'required' attributes but it appears that "e.preventDefault()" is not working. The form submits and the POST succeeds but with the unvalidated data and I can't find where the problem is.

<form>
  <label for="name" class="control-label">Name</label>
  <input type="text" id="name" class="form-control" required>
  <label for="phone" class="control-label">Phone Number</label>
  <input type="text" id="phone" class="form-control" required>
  <label for="email" class="control-label">Email address</label>
  <input type="email" id="email" class="form-control" required>
  <div id="form-response"></div>
  <button class="btn btn-lg btn-primary btn-block" id="submit" type="submit" style="background-color:#28547C;">Request Appointment</button>
</form>

JS:

$(document).ready(function() {
    $("#submit").click(function(e) {
      e.preventDefault();
      var name = $("#name").val(),
        email = $("#email").val(),
        phone = $("#phone").val()
      $.ajax({
        type: "POST",
        url: 'https://a2xvt72c0c.execute-api.us-west-2.amazonaws.com/prod',
        contentType: 'application/json',
        data: JSON.stringify({
          'name': name,
          'phone':phone,
          'email': email
        }),
        success: function(res) {
          $('#form-response').html('<div class="alert alert-info" role="alert">Thank you! Appointment request has been sent. We will contact you soon. </div>');
        },
        error: function() {
          $('#form-response').html('<div class="alert alert-info" role="alert">Something went wrong... We are working on it!</div>');
        }
      });
    })
  });

JS Fiddle: https://jsfiddle.net/yhgz55y0/

Answer 1

Right now you are using a click event and not a submit event. If you switch it to:

$("#submit").submit(function(e) {...

the validation works.

Answer 2

Your form is submitting because you are calling the $.post() immediately without stopping. You want to run validation against your name , email and phone variables and if any are not valid, return early or put the entire thing into an if block.

What e.preventDefault() does is prevents the browser built-in actions. But as your form has no action or target properties, you are effectively canceling a no-op, hence why this is not behaving as you expect it to.

Answer 3

preventDefault is a function that prevents a normal task from executing. Here you prevent the click on a button. A button doesn´t have a function in this form so there won´t be any difference. You want to prevent de form from submiting. If you change your code to this:

 $(document).ready(function() { $("form").submit(function(e) { e.preventDefault(); var name = $("#name").val(), email = $("#email").val(), phone = $("#phone").val() $.ajax({ type: "POST", url: 'https://a2xvt72c0c.execute-api.us-west-2.amazonaws.com/prod', contentType: 'application/json', data: JSON.stringify({ 'name': name, 'phone':phone, 'email': email }), success: function(res) { $('#form-response').html('<div class="alert alert-info" role="alert">Thank you! Appointment request has been sent. We will contact you soon. </div>'); }, error: function() { $('#form-response').html('<div class="alert alert-info" role="alert">Something went wrong... We are working on it!</div>'); } }); }) }); 

This assuming you only have 1 form on your page. This will prevent the form from submiting.