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

Question

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

4

我正在尝试使用Ajax提交表单，并使用查询验证插件对其进行验证。我的代码如下：

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

但它没起作用。我在这里犯了任何错误吗？有人能帮帮我吗？一些文字，一些文字，一些文字，一些文字，一些文字

- Drop Shadow

1

你的DOM准备就绪事件处理程序中有$(this).serialize()和event.preventDefault()，这根本没有任何意义...特别是因为在此位置没有要序列化的this或要阻止的event。 - Sparky

2个回答

-1

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

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

- mzh

根据jQuery Validate插件文档，任何ajax都应该放在submitHandler选项中。如果将ajax放在click处理程序中，您会干扰默认情况下验证插件的操作方式。 - Sparky

你在 DOM 就绪事件处理程序函数中还有 $(this).serialize() 和 event.preventDefault()，这根本没有任何意义。 - Sparky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pratik Joshi · Accepted Answer

更新：使用以下选项，因为它可以在所有情况下工作，给您ajax的力量

这里是JSFiddle

在检查元素或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
    });       
  }

底线 -> 在submitHandler内使用jQuery validate的自身机制通过AJAX提交表单。