如何使用Ajax和Jquery Validation提交表单? [英] How to submit form with Ajax and Jquery Validation?

查看:176
本文介绍了如何使用Ajax和Jquery Validation提交表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用Ajax提交一个from,并使用查询验证插件对其进行验证.我在下面写代码:

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

<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

推荐答案

更新:使用以下选项,因为它在所有情况下都可以为您提供ajax的功能

JSFiddle此处

在检查"元素或Firebug下的"NET"标签中签入

Check in your NET tab under Inspect element or Firebug

   $("#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->使用jQuery验证自己在 submitHandler 中通过AJAX发布表单的机制.

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

这篇关于如何使用Ajax和Jquery Validation提交表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆