如何使用Ajax和Jquery验证提交表单？

I am trying to submit a from with Ajax and use query validation plugin to validate it . I write code below :

我正在尝试使用Ajax提交一个from并使用查询验证插件来验证它。我写下面的代码:

<html>
<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="jquery.validate.js"></script>
</head>

<body>
    <form id="myForm">
        <input type="text" name="name" />
        <br/>
        <input type="text" name="school" />
        <br/>
        <input type="submit" />
    </form>
    <div id="result"></div>

<script>        
    $(document).ready(function () {

    $("#myForm").validate({ 
        onkeyup: false,
        rules: {
            name: {
                required: true,
                minlength: 5
            },
            school: {
                required: true,
                minlength: 5
            }
        }
    });

    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();

    $("#myForm").ajaxForm({
        url: "add_admin.php",
        type: "post",
        data: values,
        beforeSubmit: function () {
            return $("#myForm").valid();
        },
        success: function(){
            //alert("success");
            $("#result").html('Submitted successfully');
        },
        error:function(){
//            alert("failure");
            $("#result").html('There is error while submit');
        }
    });

});

</script>
</body>

but it didn't work . Made I any mistake here ? can any one help me ? some text some text some text some text some text

但它不起作用。我在这里弄错了吗?谁能帮我 ?一些文字有些文字有些文字有些文字有些文字

2 个解决方案

#1

Update : Use following option as it works on all circumstances giving you power of ajax

更新:使用以下选项,因为它适用于所有情况,为您提供ajax的强大功能

JSFiddle here

Check in your NET tab under Inspect element or Firebug

检查Inspect element或Firebug下的NET选项卡

   $("#myForm").validate({ 
    rules: {           
        school: {
            required: true,
            minlength: 5
        }
    },
    submitHandler: function(form) {
        //Your code for AJAX starts       

        jQuery.ajax({
                     url:'ajax.php',
                     type: "post",
                     data: $(form).serialize(),
                    success: function(){
                        //alert("success");
                        $("#result").html('Submitted successfully');
                    },
                    error:function(){
            //            alert("failure");
                        $("#result").html('There is error while submit');
                    }                
        //Your code for AJAX Ends
    });       
  }

});

Bottomline -> Use jQuery validate's own mechansim of posting form via AJAX inside submitHandler.

Bottomline - >使用jQuery验证自己在submitHandler中通过AJAX发布表单的mechansim。

#2

-1

This might help you...

这可能对你有所帮助......

<form id="myForm">
    <input type="text" name="name" />
    <br />
    <input type="text" name="school" />
    <br />
    <input type="submit" id="BTNTest" />
</form>
<div id="result"></div>

<script>
    $(document).ready(function () {

        $("#myForm").validate({
            onkeyup: false,
            rules: {
                name: {
                    required: true,
                    minlength: 5
                },
                school: {
                    required: true,
                    minlength: 5
                }
            }
        });

        event.preventDefault();
        $("#result").html('');
        var values = $(this).serialize();

        $(document).on('click', '#BTNTest', function () {
            $.ajax({
                url: "add_admin.php",
                type: "post",
                data: values,
                beforeSubmit: function () {
                    return $("#myForm").valid();
                },
                success: function () {
                    //alert("success");
                    $("#result").html('Submitted successfully');
                },
                error: function () {
                    //            alert("failure");
                    $("#result").html('There is error while submit');
                }
            });
        });
    });

</script>

#1