JavaScript validation before AJAX submission

Question

I'm trying to validate a form before allowing my ajax submission,however I have two problems. The first problem being I don't know how to best go about validating before submission (most professional process). The second problem being, what is preventing my validation code I currently from working? Looking to become more efficient so all input is welcome. Thanks a ton.

  $('#form-reg').on('submit', function(){ var bool = false; var name = document.getElementById('#name-reg'); var email = document.getElementById('#email-reg'); console.log(name); console.log(email); if(!/[^a-zA-Z]/.test(name)){ bool = true; } else{ bool = false; } if(bool == true){ console.log(document.getElementById('#name-reg')); $('#form-reg').slideUp('slow'); // serialize the form var formData = $(this).serialize(); console.log(formData); $.ajax({ type : 'POST', url : 'register.php', data : formData, success: function() { alert("Success"); }, error: function(xhr) { alert("fail"); } }) .done(function (data) { document.getElementById('form-reg').reset(); }) .fail(function (error) { alert("POST failed"); }); //return false; } else { alert('try again'); } }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> <form id = "form-reg"> <label id ="x" for="name">Name</label> <input id="name-reg" name="name"></br> <label id = "y" for="email">Email</label> <input id="email-reg" name="email"></br> <input type="submit" value="submit" id = "submit-reg"> </form> 

Answer 1

The issue with your code is you have to stop the form submit like:

$('#form-reg').on('submit', function(e){
  e.preventDefault();

and after checking the validation, submit the form if validation succeeds.

Answer 2

Although it is a minor answer, I will post it anyway. The problem looks like the use of

var name = document.getElementById('#name-reg');

the # is causing the first problem and should be

var name = $('#name-reg').val();

 $('#form-reg').on('submit', function(){ var bool = false; var name = $('#name-reg').val(); var email = $('#email-reg').val(); console.log(name); console.log(email); if(!/[^a-zA-Z]/.test(name)){ bool = true; } else{ bool = false; } if(bool == true){ console.log($('#name-reg').val()); $('#form-reg').slideUp('slow'); // serialize the form var formData = $(this).serialize(); console.log(formData); $.ajax({ type : 'POST', url : 'register.php', data : formData, success: function() { alert("Success"); }, error: function(xhr) { alert("fail"); } }) .done(function (data) { document.getElementById('form-reg').reset(); }) .fail(function (error) { alert("POST failed"); }); //return false; } else { alert('try again'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> <form id = "form-reg"> <label id ="x" for="name">Name</label> <input id="name-reg" name="name"></br> <label id = "y" for="email">Email</label> <input id="email-reg" name="email"></br> <input type="submit" value="submit" id = "submit-reg"> </form>