Submit form with Ajax and Jquery validation

Question

I have form. There are two inputs:name and birthday. My code is:

<div id="block"> 
 <form role="form" id="addForm" method="post">
     <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" placeholder="Enter name">
     </div>
     <div class="form-group">
         <label for="birthday">Birthday</label>
         <input type="text" class="form-control" id="birthday" required placeholder="Enter birthday">
     </div>
     <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button>
 </form>
</div>

And I validate my form using jquery:

<script>
$().ready(function() {
  $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
            });
        }
    });
});
 </script>

When all inputs are right and I click on button Add my Ajax doesn't work.

Maybe are some wrongs with submitHandler?

Answer 1

You can try this

<script>
$('#submit').click(function (){

   //your code here
 });
</script>

Answer 2

You can write like this:

$().ready(function() {                 
    $("#addForm").validate({
        rules:{
            name:{
                required: true,
                minlength: 2,
                maxlength: 10,
            },
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        messages:{
            name:{
                required: "This field is required",
                minlength: "Name must be at least 2 characters",
                maxlength: "Maximum number of characters - 10",
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                  url:'addEmpl.php',
                type:'GET',
                dataType: 'html',
                success: function(data) {
                    $("#block").html(data);
                }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
});

Here is the fiddle http://jsfiddle.net/bhumi/bvdu94c4/

Answer 3

Try using the below code instead of ajaxSubmit:

$.ajax({
  type: "GET",
  url: "addEmpl.php",
  data: $(this).serialize(),
  dataType: "html"
  success: function(data) {
    $("#block").html(data);
  }
});

Hope it will help you :)