此電子郵件表單具有前端驗證,僅檢查其是否包含'@'。如果失敗,它將打開錯誤消息'錯誤的格式'。手動觸發ko驗證錯誤
如果它通過,那麼ajax調用會碰到一個後端API端點,它會對它執行更嚴格的正則表達式。即foo @ bar將通過前端驗證,但未通過後端驗證。
如果ajax結果作爲ValidationError返回,這意味着它未能通過後端「有效模式」測試。在這種情況下,我想手動觸發現有的前端「錯誤模式」錯誤消息。
如何從JavaScript內做到這一點?有沒有可以在「case ValidationError:」中設置的變量或標誌,它會這樣做?
我的形式:
<form novalidate data-bind="submit: onRegister">
<div class="input-wrapper email" data-bind="validationElement: EmailAddress, css: { 'validation-success': EmailAddress.isModified() && EmailAddress.isValid() }">
<label for="registerModalEmail">@AuthenticationStrings.EmailLabel</label>
<input type="email" placeholder="Email" id="registerModalEmail" name="EmailAddress" data-bind="value: EmailAddress" required />
</div>
<div class="validation-error-message" id="email-address-error" data-bind="validationMessage: EmailAddress"></div>
<button>Create Account</button>
我的腳本:
self.EmailAddress = ko.observable().extend({
required: {
params: true,
message: 'Please provide an email'
},
pattern: {
/**
* Email validation is crazy, so just checking for @ symbol on front end.
* Back end will use a more complex regex.
*/
params: '@',
message: 'Bad pattern'
},
validation: {
async: true,
validator: function (val, parms, callback) {
$.ajax({
url: '/isEmailAllowed',
data: { 'EmailAddress': val },
type: 'POST',
success: function (results) {
if (results) {
switch (results.result) {
case "Valid":
callback(true); // email is unique
break;
case "ValidationError":
// email is malformed
// might be caught by front-end but can slip through
break;
default:
callback(false);// unknown error
}
}
}//,
//error: function (xhr) {
// if (xhr) {
// switch (xhr.statusText) {
// case "Conflict":
// callback(false); // show dupe email message
// break;
// default:
// callback(true); // defeat usual error message
// // trigger invalid email error
// }
// }
//}
});
},
message: 'This email exists. Sign in instead.'
}
});