我正在尝试使用两个按钮创建一个简单的应用程序表单(保存并提交)。 我正在使用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);
                   }                
                }
            });


        });

      });

===============>>#1 票数:2

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

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

更多信息: http//jqueryvalidation.org/rules

===============>>#2 票数: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/

===============>>#3 票数:1

如果要在不同的按钮调用中使用新设置再次调用validate

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

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

  ask by jcanipar translate from so

未解决问题?本站智能推荐: