我有一个非常复杂的表单的验证方法，由我之前的前端开发人员编写。有一个主要问题有两个子问题，如果主要问题是切换，至少必须切换子问题。切换的任何子问题都必须有注释。我必须对它进行更改，但我首先要了解它是如何工作的。我希望有人可以回答以下问题：
对于addMethod添加的功能，这是一个自定义规则吗？这就是为什么在规则中列出的函数并设置为“true”？
每个规则的defaultInvlid函数是什么？我看到它返回true / false。返回true会产生什么影响？
为什么消息中包含功能？这是否意味着如果函数返回true，则显示该消息？
$("#form1").validate({
errorLabelContainer: $("#form-error"),
rules: {
//sub fields question 1
'report_question_ID_product_received_as_ordered_SUB_missing_parts_comment': {
required: '#report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable:checked',
report1subfields: true,
defaultInvalid: {
depends: function (element) {
return $('#report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable').is(':checked') ? true : false;
}
}
},
'report_question_ID_product_received_as_ordered_SUB_other_issues_comment': {
required: '#report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable:checked',
report1subfields: true,
defaultInvalid: {
depends: function (element) {
return $('#report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable').is(':checked') ? true : false;
}
}
}
},
focusInvalid: false,
messages: {
'report_question_ID_product_received_as_ordered_SUB_missing_parts_comment': {
defaultInvalid: "Are there missing parts?",
report1subfields: "Did You Receive The Product As Ordered? > At least one subquestion is mandatory."
},
'report_question_ID_product_received_as_ordered_SUB_other_issues_comment': {
defaultInvalid: "Are there other issues with your order?",
report1subfields: "Did You Receive The Product As Ordered? > At least one subquestion is mandatory."
}
},
submitHandler: function (form) {
//SUBMIT
},
invalidHandler: function (event, validator) {
showFormError(validator);
}
}).settings.ignore = [];
HTML
<div id="question-form-wrapper">
<div id="form-error" style="display: none"></div>
<div class="questions-form" id="report-questions-form">
<div class="question question-textarea has-subquestions" runat="server" id="div0001_00" style="display:none;">
<div class="question-intro clearfix">
<h2 id="QuestionText0001_00" runat="server">Did You Receive The Product As Ordered?</h2>
<div class="no-yes answer-acceptable">
<div class="no"><label class="label-1" for="report_question_ID_product_received_as_ordered_not_acceptable">Not Acceptable</label></div>
<a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_link"></a>
<div class="yes"><label class="label-2" for="report_question_ID_product_received_as_ordered_acceptable">Acceptable</label></div>
<label class="universal-label"></label>
<input type="radio" id="report_question_ID_product_received_as_ordered_not_acceptable" name="report-question-ID-product-received-as-ordered" value="0" runat="server">
<input type="radio" id="report_question_ID_product_received_as_ordered_acceptable" name="report-question-ID-product-received-as-ordered" value="1" checked="true" runat="server">
</div>
</div>
<div class="question-content">
<div class="question-content-inner clearfix">
<div class="sub-questions-list">
<div class="sub-question sub-question-textarea" runat="server" id="div0001_01" style="display:none;">
<div class="sub-question-intro clearfix">
<h3 id="QuestionText0001_01" runat="server">Are there missing parts?</h3>
<div class="yes-no answer-acceptable">
<div class="yes"><label class="label-1" for="report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable">Yes</label></div>
<a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_link"></a>
<div class="no"><label class="label-2" for="report_question_ID_product_received_as_ordered_SUB_missing_parts_acceptable">No</label></div>
<label class="universal-label"></label>
<input type="radio" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable" name="report-question-ID-product-received-as-ordered-SUB-missing-parts" value="1" runat="server">
<input type="radio" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_acceptable" name="report-question-ID-product-received-as-ordered-SUB-missing-parts" value="0" checked="true" runat="server">
</div>
</div>
<div class="sub-question-content">
<div class="sub-question-content-inner clearfix">
<div class="rounded-corners">
<div class="rounded-corners-inner clearfix">
<div class="comment-wrapper">
<textarea class="comment-for-question" cols="10" rows="20" name="report_question_ID_product_received_as_ordered_SUB_missing_parts_comment" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_comment" runat="server">Please provide comments. Up to 5 photos can be attached.</textarea>
</div>
<div class="upload-photos clearfix" runat="server">
<div class="upload-photos-add" id="Q0001_01" runat="server">
<asp:AjaxFileUpload EnableViewState="false" ID="AjaxFileUpload1" ContextKeys="0001.01" runat="server" AllowedFileTypes="jpg,jpeg,png" OnUploadComplete="AjaxFileUpload_UploadComplete" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" OnClientUploadError="onClientUploadError"></asp:AjaxFileUpload>
</div>
<div class="upload-photos-list">
<div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0001_01">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-question sub-question-textarea" runat="server" id="div0001_02" style="display:none;">
<div class="sub-question-intro clearfix">
<h3 id="QuestionText0001_02" runat="server">Are there other issues with your order?</h3>
<div class="yes-no answer-acceptable">
<div class="yes"><label class="label-1" for="report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable">Yes</label></div>
<a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_SUB_other_issues_link"></a>
<div class="no"><label class="label-2" for="report_question_ID_product_received_as_ordered_SUB_other_issues_acceptable">No</label></div>
<label class="universal-label"></label>
<input type="radio" id="report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable" name="report-question-ID-product-received-as-ordered-SUB-other-issues" value="1" runat="server">
<input type="radio" id="report_question_ID_product_received_as_ordered_SUB_other_issues_acceptable" name="report-question-ID-product-received-as-ordered-SUB-other-issues" value="0" checked="true" runat="server">
</div>
</div>
<div class="sub-question-content">
<div class="sub-question-content-inner clearfix">
<div class="rounded-corners">
<div class="rounded-corners-inner clearfix">
<div class="comment-wrapper">
<textarea class="comment-for-question" cols="10" rows="20" name="report_question_ID_product_received_as_ordered_SUB_other_issues_comment" id="report_question_ID_product_received_as_ordered_SUB_other_issues_comment" runat="server">Please provide comments. Up to 5 photos can be attached.</textarea>
</div>
<div class="upload-photos clearfix" runat="server">
<div class="upload-photos-add" id="Q0001_02" runat="server">
<asp:AjaxFileUpload EnableViewState="false" ID="AjaxFileUpload2" ContextKeys="0001.02" runat="server" AllowedFileTypes="jpg,jpeg,png" OnUploadComplete="AjaxFileUpload_UploadComplete" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" OnClientUploadError="onClientUploadError"></asp:AjaxFileUpload>
</div>
<div class="upload-photos-list">
<div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0001_02">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<input type="image" src="assets/images/css/button-next-red.png" alt="Next" runat="server" id="btnNext">
</div>
</div><!-- #report-questions-form -->
</div><!-- #question-form-wrapper -->
答案 0 :(得分：2)
- 对于添加了
addMethod的功能，这是自定义规则吗？这就是为什么在规则中列出的功能并设置为＆＃34; true＆＃34;？
我不会在您的OP中的任何地方看到.addMethod()。
但是，是的，the .addMethod() method用于创建自定义规则（a.k.a。＆＃34;方法＆＃34;）。将其设置为true会在此字段中对其进行声明，与将任何其他规则设置为true无异。
- 每个规则的
defaultInvalid函数是什么？我看到它返回true / false。返回true会有什么影响？
defaultInvalid是一种自定义方法，由于我无法看到相应的.addMethod('defaultInvalid', ...)，我无法告诉您它的用途。但是，true表示您希望该字段对此字段生效，false表示您不会。
您的id和name值非常长，所以我将它们剪裁为我的答案...
defaultInvalid: {
depends: function (element) {
return $('#yourRadioID').is(':checked') ? true : false;
}
}
The depends property is part of the rules option。它允许您设置规则生效的条件。
在您的情况下，如果用户选中了目标无线电元素，则将defaultInvalid规则应用于该字段，否则不应用。
换句话说，当检查目标无线电时，它会产生这种效果......
defaultInvalid: true // <- rule is enabled for this field
当目标无线电被联合国检查时，它会产生这种效果......
defaultInvalid: false // <- rule is disabled for this field
- 为什么功能包含在消息中？这是否意味着如果函数返回true，则显示该消息？
messages选项中不包含任何功能。这只是定义自定义错误消息的位置。
.validate()方法中的所有内容是＆＃34;对象文字＆＃34; ...由大括号括起的key:value对的逗号分隔列表。允许value是另一个对象文字或函数。 （key＆{39}允许value＆＃39}是插件的作者。）
messages: {
yourField1: { // <- the input NAME attribute
required: "you must fill this out", // <- custom message for this required rule.
phoneUS: "must be a phone" // <- custom message for this phoneUS rule.
},
yourField2: { // <- the input NAME attribute
required: "this is required", // <- custom message for this required rule.
number: "must be a number" // <- custom message for this number rule.
}
},
没有充分的理由将ignore选项附加到.validate()的末尾，使用.settings这样......
$("#form1").validate({ ... }).settings.ignore = [];
编码非常草率，因为它与其他选项完全不同，而且不必要地调用其他方法。
为简化起见，只需声明ignore选项，就像任何其他选项一样......
$("#form1").validate({
ignore: [], // <- inside validate() with your other options
errorLabelContainer: $("#form-error"),
rules: {
....
},
// your other options
});
我强烈建议您查看the SO Tag Wiki page上有关jQuery Validate插件基本用法的信息。
有关所有文档，请参阅the official website。