jquery验证插件使用条件答案

【问题标题】：jquery validation plugin using conditonsjquery验证插件使用条件
【发布时间】：2013-11-06 11:43:06
【问题描述】：

我正在使用验证插件来验证表单，这是我的规则

$("#creatProfileForm").validate({
    ignore: [], //use for hidden fields validation, by default hidden fields are ignored
    rules : {
        "firstName" : {
            required : true,
        },
        "lastName" : {
            required : true,
        },
        "gender" : {
            required : true,
        },
        "password" : {
            required : function(element) {
                if($("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true)
                    return true;
            },
            minLength : 6
        }
    },
        messages : {
            "firstName" : {
                required : 'First Name is required',
            },
            "lastName" : {
                required: "Last Name is required",
            },
            "gender" : {
                required : "Gender is required",
            },
            "password" : {
                required : "Password is required",
                minLength : "Lenght should be atleast 6 characters"
            }
        },
        errorPlacement: function(error, element) { //custom location for error placement
            if (element.attr("name") == "gender") {
              error.insertAfter(".temp");
            } else {
              error.insertAfter(element);
            }
          } 
});

更新：如果我删除回调函数并添加“required:true”，它可以工作。

我的问题是密码字段，我在视图中存储了一个布尔值，并使用该值决定密码字段所需的值。如果值为 true，则需要密码，否则不需要。

当我提交表单时，在控制台上打印“false”，但密码字段仍然显示消息，"password is required"

我的代码有什么问题。请帮助我。提前致谢

【问题讨论】：

还显示此表单的 HTML 标记。
您的minlength 规则拼写错误。

标签： jquery jquery-validate

【解决方案1】：

我认为您的问题只是没有minLength这样的方法。你的意思可能是minlength。正如@rubyist 建议的那样，您需要将所需的依赖项更改为：

required: $("#isSocialSignup").val() == 'true' ? true : false,

您使用 $('#isSocialSignup').val() == 'true' || $('#isSocialSignup').val() == true 的那一部分，与布尔值 true 进行比较的第二部分，以及 .val() 将始终告诉您它是 true，如果其中有任何内容，包括字"false"。所以这可能对你没有帮助！

除此之外，您的代码在我看来还不错。太多的尾随逗号，会让 IE 用户感到不安：

"gender": {
   required: true, //<---- that comma will cause an issue
}, //<--- this one won't because there is something after it

半相似的工作示例：http://jsfiddle.net/ryleyb/D59ZW/

【讨论】：

+1... 当我发布我的答案时，我没有注意到您已经发现了 minLength 错误。我也相信这是整个问题的根本原因。 The trailing commas are pretty sloppy coding but the IE version has to be pretty old (6 & 7) for this to be a real problem.
根据我的经验，IE6/7 仍然很流行，尤其是在企业环境中。我已经很高兴地停止尝试在 IE6/7 中使事情变得漂亮，但至少让一切正常工作仍然很好！
确实如此，但我认为值得指出的是，这不会影响大多数的“IE用户”。
@Ryley 非常感谢，它有效，问题出在“L”上。当我将其更改为“minlength”时，它起作用了。

【解决方案2】：

引用 OP 的 cmets：

"...firebug 控制台中的错误$.validate.method[method] is undefined"

和

“...使用required:false，它会给出相同的错误（$.validate.method[method] is undefined）并提交表单。”

问题很简单……没有这种方法叫minLength。

该方法称为minlength => 注意小写的l 代替了大写的L。

见：http://jqueryvalidation.org/minlength-method/

【讨论】：

非常感谢您的时间和帮助。当我第一次看到时，我标记了 Ryley 的答案。再次感谢您的帮助和时间。

【解决方案3】：

使用依赖选项：http://jqueryvalidation.org/validate/

required: {
            depends: function(element) {
                return $("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true
            }
        }

【讨论】：

我的表单被提交并在 firebug 控制台中显示以下错误“$.validate.method[method] is undefined”
depends 选项不是强制性的。声明规则时，代替value 的适当函数也将起作用。见：jsfiddle.net/LzRDB

【解决方案4】：

试试这个

rules : {
            "firstName" : {
                required : true,
            },
            "lastName" : {
                required : true,
            },
            "gender" : {
                required : true,
            },
            "password" : {
                required: $("#isSocialSignup").val() == 'true' ? true : false,
                minLength : 6
            }
        },

【讨论】：

我的表单被提交并在 firebug 控制台中显示以下错误“$.validate.method[method] is undefined”
我认为您将字符串作为参数传递，而字符串没有 val() 方法.....请再次检查
console.debug($("#isSocialSignup").val())，此语句在控制台上打印“false”
试试这个 $("#isSocialSignup").val() == 'true' ？真：假
我试过了，在控制台上报错，我的东西“required:false”造成了一些问题。

【解决方案5】：

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
  });
$("#creatProfileForm").validate({
    rules : {
        "firstName" : {
            required : true,
        },
        "lastName" : {
            required : true,
        },
        "gender" : {
            required : true,
        },
        "password" : {
            required: ($("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true) ? true : false,
            minLength : 6
        }
    },
        messages : {
            "firstName" : {
                required : 'First Name is required',
            },
            "lastName" : {
                required: "Last Name is required",
            },
            "gender" : {
                required : "Gender is required",
            },
            "password" : {
                required : "Password is required",
                minLength : "Lenght should be atleast 6 characters"
            }
        },
    submitHandler: function(form) {
    form.submit();
    }
});

【讨论】：