javascript - Submit form with Ajax and Jquery validation - Stack Overflow

admin 管理员组

文章数量: 1086019

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?

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?

• javascript
• php
• jquery
• ajax
• forms

Share Improve this question Follow edited Dec 28, 2016 at 11:35 Bhumi Shah 9,4741010 gold badges6868 silver badges110110 bronze badges asked Dec 28, 2016 at 11:33 Nastya GorobetsNastya Gorobets 19722 gold badges1010 silver badges2323 bronze badges 4

• 3 Have you included the ajaxSubmit library in your page? It's not a standard jQuery method. Have you checked the console for errors? – Rory McCrossan Commented Dec 28, 2016 at 11:35
• 1 I have error: TypeError: $(...).ajaxSubmit is not a function – Nastya Gorobets Commented Dec 28, 2016 at 11:39
• 1 In which case you need to include the ajaxSubmit() library. Alternatively you could just use the standard $.ajax() method, as including an entire library for a single request is overkill. If you google there's lots of guides and tutorials on how to send a form through AJAX with jQuery – Rory McCrossan Commented Dec 28, 2016 at 11:43
• Thanks! It solved my problem! – Nastya Gorobets Commented Dec 28, 2016 at 11:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 :)

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/bhumi/bvdu94c4/

You can try this

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

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

本文标签： javascriptSubmit form with Ajax and Jquery validationStack Overflow