Question

我正在尝试使用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>

但它没有用。我在这里弄错了吗？谁能帮我？有些文字有些文字有些文字有些文字有些文字

Answer 1

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

JSFiddle here

检查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
    });       
  }

}）;

底线 - ＆gt;使用jQuery验证自己在 submitHandler 中通过AJAX发布表单的机制。

Answer 2

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

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

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

2 个答案: