Question

我正在尝试使用两个按钮创建一个简单的应用程序表单（保存并提交）。我正在使用jQuery validate插件。为了提交表格，申请人必须正确地填写整个表格。没有空框，每个框中都有有效数据。但是，要保存，他们可以将任意数量的字段留空，但是他们填写的字段必须有效。（即数字框中没有字母）。

为此，我有两个单独的验证功能，根据用户点击的按钮，调用其中一个。这适用于提交按钮，它第一次用于保存按钮。但是，如果用户在一个用于数字和点击的方框中输入一些乱码，保存两次，则表单仍会提交。他们第一次点击保存时，表现正常。

对于我的生活，我无法弄清楚为什么。我的jquery代码如下：

 $(document).ready(function(){

      $("#csa_submit_button").live("click",function(){
            //alert("submit");
            $("#csa_submit_flag").val("true");
            validator = $("#csa_form").validate({
                "rules": {
                    "csa_phone" : {required: true, digits: true, minlength: 10, maxlength: 10},
                    "csa_current_grants" : {number: true, required: true},
                    "csa_current_work_study" : {number: true, required: true},
                    "csa_balance_no_loans" : {number: true, required: true},
                    "csa_current_loans" : {number: true, required: true},
                    "csa_textbooks" : {number: true, required: true},
                    "csa_total_to_date" : {number: true, required: true},
                    "csa_parent_plus" : "required",
                    "csa_student_loans" : "required",
                    "csa_balance" : {number: true, required: true},
                    "csa_employment_contributions" : {number: true, required: true},
                    "csa_current_financial_situation" : "required",
                    "csa_activities" : "required",
                    "csa_request_amount" : {required: true, number: true},
                    "csa_term": {required: true, minlength: 1}
                },  
                "messages": {
                    "csa_term": "You must select at least one term",
                    "csa_phone": "You must enter a phone number in the following format: ##########"
                },
                errorPlacement: function(error, element) {
                   if (element.attr('type') === 'radio') {
                      error.insertAfter(element.parent());
                   }
                   else if (element.attr('name') === 'csa_employment_contributions'){
                       error.insertAfter(element.parent());
                   }
                   else if (element.attr('name') === 'csa_term') {
                       error.insertAfter(element.parent());
                   }
                   else {
                      error.insertAfter(element);
                   }
                }
            }); 
       });
      $("#csa_save_button").live("click",function(){

            $("#csa_submit_flag").val("false");

            validator = $("#csa_form").validate({
                "rules": {
                    "csa_phone" : {number: true},
                    "csa_current_grants" : {number: true},
                    "csa_current_work_study" : {number: true},
                    "csa_balance_no_loans" : {number: true},
                    "csa_current_loans" : {number: true},
                    "csa_textbooks" : {number: true},
                    "csa_total_to_date" : {number: true},
                    "csa_balance" : {number: true},
                    "csa_employment_contributions" : {number: true},
                    "csa_request_amount" : {number: true}
                },
                "messages": {
                    "csa_phone": "You must enter a phone number in the following format: ##########"
                },
                errorPlacement: function(error, element) {
                   if (element.attr('name') === 'csa_employment_contributions'){
                       error.insertAfter(element.parent());
                   } else {
                      error.insertAfter(element);
                   }                
                }
            });


        });

      });

Answer 1

我想通过链接到他自己的另一个答案来完成Sparky的答案：https://stackoverflow.com/a/24456384/923712。

简而言之，有一种方法可以在.validate()调用后使用.rules('add', ...)和.rules('remove')方法更新验证。

此处有更多信息：http://jqueryvalidation.org/rules

Answer 2

你对.validate()正在做的事情有一个根本的误解。不是按需检查有效性的方法。一旦插件正确初始化，就会自动完成。

.validate()只是初始化插件及其在表单上的选项。这就是为什么你在第一次点击时看到它工作一次的原因。按照设计，再次调用它，即使使用不同的选项，也不会做任何事情......这就是为什么它会在后续点击其他按钮时被打破。

您不能同时在同一表单上拥有两个独立且唯一的插件实例。您别无选择，只能重新设计代码。

请参阅文档：http://docs.jquery.com/Plugins/Validation

修改

根据需要，没有可用于打开/关闭验证的方法。由于插件旨在处理click并拦截submit事件，因此您可以从表单中删除其他按钮（以避免提交）并单独处理数据，使用ajax发送数据到服务器。

$('#save').click(function() { var data = $('#myform').serialize(); // ajax code to send the serialized data to the server });

简单演示：http://jsfiddle.net/x4N4U/

Answer 3

如果您想使用不同按键调用的新设置再次呼叫验证

e.g $('#formid').removeData('validator');

这将删除附加表单的验证，然后使用新设置再次初始化

jQuery Validate - 两个单独的验证，一个表单

3 个答案: