JsViews 顶级数据链接验证组语法?
JsViews top-level data-linked validation group syntax?
我在这个 jsViews 验证组示例中看到,它存在于模板中并包含所有要验证的字段。
http://www.jsviews.com/#samples/tag-controls/datepicker/with-validation-wizard
是否也可以使用顶级数据链接表单元素来形成验证组,就像在这个 jsfiddle 中一样?
http://jsfiddle.net/xnerzqt6/
var app = {
formData: {
selectedThing: "",
selectedPlace: "",
selectedAction: ""
}
};
$("#content").link(true, app);
.val-msg {
margin-right: 5px;
}
.invalid.val-msg {
border: 2px solid #cf321d;
}
.radiogroup.val-msg {
padding: 3px;
display: inline-block;
}
.radiogroup.invalid.val-msg {
margin: 5px;
}
select.invalid.val-msg {
margin: 4px;
}
select.val-msg {
margin: 5px;
}
input[type=radio] {
margin: 3px 3px 3px 5px;
padding: 0;
}
label.error {
color: #cf321d;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script src="http://www.jsviews.com/download/sample-tag-controls/generic-edit/edit.js"></script>
<script src="http://www.jsviews.com/download/sample-tag-controls/validate/validate.js"></script>
<div id="content">
<input data-link='{validate formData.selectedThing trigger=true minLength=8}'/><br/>
<input data-link='{validate formData.selectedPlace trigger=true minLength=8}'/><br/>
<span>large block of unrelated stuff</span><br/>
<input data-link='{validate formData.selectedAction trigger=true minLength=8}'/><br/>
<input type='button' value='Submit'/><br/>
<span>should not be able to submit while any validation fails</span>
</div>
您链接到的 validation wizard 示例使用了一个 "validation" 验证组标签和一个 'validate' 标签,它们是为模板中的嵌套标签编写的:
{^{validation}}
{^{validate .../}}
{^{validate .../}}
{{/validation}}
所以你有两个选择。 1) 编写一个新的验证组标签,设计用于顶级数据链接,或 2) 在您的页面中包含一些 'shim code',以编程方式将验证标签实例连接到验证组标签。
#2 实际上是可行的——这里是一个 jsfiddle:http://jsfiddle.net/BorisMoore/xf0Lnufw/
额外的shim代码如下:
// Get the validationGroup 'validation' tag
var validationGroup = $.view().childTags("validation")[0];
$.view().childTags("validate").forEach(function(validateTag) {
// For each 'validate' tag, associate with validationGroup.
validateTag.validationGroup = validationGroup;
validationGroup.addChild(validateTag);
});
validationGroup.validate(); // Run the validation group validate() method
// Data-link the disabled state of the submit button to be disabled except
// when the validationGroup is valid.
$.link(
"disabled{:!~validation.isValid}",
"#submitBtn",
app,
{validation: validationGroup}
);
我在这个 jsViews 验证组示例中看到,它存在于模板中并包含所有要验证的字段。 http://www.jsviews.com/#samples/tag-controls/datepicker/with-validation-wizard
是否也可以使用顶级数据链接表单元素来形成验证组,就像在这个 jsfiddle 中一样? http://jsfiddle.net/xnerzqt6/
var app = {
formData: {
selectedThing: "",
selectedPlace: "",
selectedAction: ""
}
};
$("#content").link(true, app);
.val-msg {
margin-right: 5px;
}
.invalid.val-msg {
border: 2px solid #cf321d;
}
.radiogroup.val-msg {
padding: 3px;
display: inline-block;
}
.radiogroup.invalid.val-msg {
margin: 5px;
}
select.invalid.val-msg {
margin: 4px;
}
select.val-msg {
margin: 5px;
}
input[type=radio] {
margin: 3px 3px 3px 5px;
padding: 0;
}
label.error {
color: #cf321d;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script src="http://www.jsviews.com/download/sample-tag-controls/generic-edit/edit.js"></script>
<script src="http://www.jsviews.com/download/sample-tag-controls/validate/validate.js"></script>
<div id="content">
<input data-link='{validate formData.selectedThing trigger=true minLength=8}'/><br/>
<input data-link='{validate formData.selectedPlace trigger=true minLength=8}'/><br/>
<span>large block of unrelated stuff</span><br/>
<input data-link='{validate formData.selectedAction trigger=true minLength=8}'/><br/>
<input type='button' value='Submit'/><br/>
<span>should not be able to submit while any validation fails</span>
</div>
您链接到的 validation wizard 示例使用了一个 "validation" 验证组标签和一个 'validate' 标签,它们是为模板中的嵌套标签编写的:
{^{validation}}
{^{validate .../}}
{^{validate .../}}
{{/validation}}
所以你有两个选择。 1) 编写一个新的验证组标签,设计用于顶级数据链接,或 2) 在您的页面中包含一些 'shim code',以编程方式将验证标签实例连接到验证组标签。
#2 实际上是可行的——这里是一个 jsfiddle:http://jsfiddle.net/BorisMoore/xf0Lnufw/
额外的shim代码如下:
// Get the validationGroup 'validation' tag
var validationGroup = $.view().childTags("validation")[0];
$.view().childTags("validate").forEach(function(validateTag) {
// For each 'validate' tag, associate with validationGroup.
validateTag.validationGroup = validationGroup;
validationGroup.addChild(validateTag);
});
validationGroup.validate(); // Run the validation group validate() method
// Data-link the disabled state of the submit button to be disabled except
// when the validationGroup is valid.
$.link(
"disabled{:!~validation.isValid}",
"#submitBtn",
app,
{validation: validationGroup}
);