寻找一种解决方案,仅在部分完成时才验证输入字段,即,如果用户未输入值,则不要验证。http://jsfiddle.net/2H2Bv/
当所有字段都满足其验证要求时,即当附加到每个输入的所有验证消息均已消失并且在单击提交按钮之前,删除顶部的验证摘要消息的解决方案“下面的完整缺少的字段”,也将很有用。 ...
的HTML
<script id="customMessageTemplate" type="text/html">
<em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<!-- ko if: displayAlert -->
<p class="customMessage" data-bind="text: validationSummary"></p> <br />
<!-- /ko -->
<fieldset>
<legend>Details</legend>
<label>First name:
<input data-bind='value: firstName' />
</label>
<label>Last name:
<input data-bind='value: lastName' />
</label>
<div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
<label>Email:
<input data-bind='value: emailAddress' required pattern="@" />
</label>
</fieldset>
<br>
<button type="button" data-bind='click: submit'>Submit</button>
<br>
<br> <span data-bind='text: errors().length'></span> errors
JS:
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.configure({
decorateElement: true,
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});
var viewModel = function() {
this.firstName = ko.observable().extend({
minLength: 2,
maxLength: 10
});
this.lastName = ko.observable().extend({
required: true
});
this.emailAddress = ko.observable().extend({ // custom message
required: {
message: 'Enter your email address.'
}
});
this.validationSummary = ko.observable("Complete missing fields below:");
this.displayAlert = ko.observable(false);
this.submit = function () {
if (this.errors().length == 0) {
alert('Thank you.');
} else {
this.displayAlert(true);
this.errors.showAllMessages();
}
};
this.errors = ko.validation.group(this);
};
ko.applyBindings(new viewModel());
如果我理解正确,那么您希望电子邮件验证在用户键入内容后运行,并且在页面加载时不会显示为“红色”。
为此,您需要删除required
和pattern
属性,以便您的输入变为:
<input data-bind='value: emailAddress' />
并向模型添加电子邮件验证,以便您的观察结果变为:
this.emailAddress = ko.observable().extend({ // custom message
required: {
message: 'Enter your email address.'
}, email:true
});
更新的小提琴
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句