3

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

为此，我有两个单独的验证函数，根据用户单击的按钮，调用两者之一。这适用于提交按钮，并且第一次适用于保存按钮。但是，如果用户在一个用于数字的框中输入了一些乱码并点击了两次保存，则表单仍然会提交。他们第一次点击保存时，它的行为正确。

对于我的生活，我无法弄清楚为什么。我的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);
                   }                
                }
            });


        });

      });
4

3 回答 3

2

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

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

更多信息在这里：http: //jqueryvalidation.org/rules

于 2014-12-15T16:20:47.467 回答
2

如果您想在不同的按钮调用上使用新设置再次调用验证

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

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

于 2016-02-09T06:08:02.943 回答
1

你对正在做什么有一个根本的误解.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/

于 2013-04-16T00:41:57.870 回答