ajax回调的jquery验证答案

【问题标题】：jquery validations on ajax callbackajax回调的jquery验证
【发布时间】：2015-02-01 03:26:25
【问题描述】：

我正在尝试在使用 Ajax 请求将表单提交到我的 asp.net 之前验证我的表单。我是 Jquery Ajax 的新手。请任何人帮助我。提前致谢。

 $(document).ready(function () {

         $("#btnSubmit").click(function () {
             var data = {
                 details: {
                     GroupName: $("#txtGroupName").val(),
                     Description: $("#txtDescription").val(),



                 }
             };
             $('#form1').validate({

                 rules: {
                     "txtGroupName": {
                         required: true,
                         minlength: 5
                     },  
                     "txtDescription": {
                         required: true,
                         minlength: 5
                     }


                     },
                     messages: {
                         "txtGroupName": {
                             required: "You must enter your group name",
                             minlength: "group name must be at least 5 characters long"
                         },
                         "txtDescription": {
                             required: "You must enter your Description",
                             minlength: "Description must be at least 5 characters long"
                         }


                 },
                 submitHandler: function (form) {

                     $.ajax({
                         url: "AddGroup.aspx/SaveData",
                         data: JSON.stringify(data),
                         dataType: "json",
                         type: "POST",
                         contentType: "application/json; charset=utf-8",

                         success: function (result) {

                             alert(result.d);




                         },
                         error: function (xhr, ajaxxOptions, thrownError) {
                             alert(thrownError);
                         }




                     });
                     $("#txtGroupName").val("");
                     $("#txtDescription").val("");
                 }
             });

         });


     });

我的 html 页面看起来

<form id="form1" runat="server">


            <div>
                <input id="txtGroupName" type="text" runat="server" name="txtGroupName" placeholder="Group Name"/>
            </div>



            <div>

                <textarea id="txtDescription" name="txtDescription" runat="server"  placeholder="Description"></textarea>
            </div>   
            <input id="btnSubmit" type="button" value="Submit" /> 
            <input id="btnLoad" type="button" value="Load Data" />



    </form>

【问题讨论】：

标签： jquery asp.net ajax jquery-validate

【解决方案1】：

你很接近。但是，您将不将.validate() 方法放在任何类型的click 处理程序中。 .validate() 方法仅用于初始化插件，click 事件由插件自动捕获。

$(document).ready(function () {

         $('#form1').validate({
             rules: {
                 "txtGroupName": {
                     required: true,
                     minlength: 5
                 },  
                 "txtDescription": {
                     required: true,
                     minlength: 5
                 }
             },
             messages: {
                 "txtGroupName": {
                     required: "You must enter your group name",
                     minlength: "group name must be at least 5 characters long"
                 },
                 "txtDescription": {
                     required: "You must enter your Description",
                     minlength: "Description must be at least 5 characters long"
                 }
             },
             submitHandler: function (form) {
                 var data = { ... };
                 $.ajax({
                     ....
                 });
                 $("#txtGroupName").val("");
                 $("#txtDescription").val("");
             }
         });

 });

【讨论】：