我实现了一个自定义验证功能,它可以正确验证,但问题是即使该字段无效,我也可以成功提交表单。
这是我的代码:
$("#applicant-email").change(function() {
var restURL= "http://apilayer.net/api/check?access_key=<key>&email="+$("#applicant-email").val()+"&smtp=1&format=1";
$.ajax({
type : 'GET',
url :restURL,
dataType :'json',
success : renderList,
});
return false;
});
function renderList(data) {
if ((data.format_valid == true) && (data.smtp_check == true) ) {
console.log("Email address is valid");
$("#applicant-email").removeClass("email-invalid");
$("#applicant-email").addClass("email-valid");
}
else {
console.log("Email address is not valid");
$("#applicant-email").removeClass("email-valid");
$("#applicant-email").addClass("email-invalid");
}
}
和自定义验证器功能:
$('#myForm').validator({
custom: {
emailexist: function ($el) {
if($('#'+$el.attr('id')).hasClass('email-invalid')){
console.log("it is invalid")
return true;
}
else {
console.log("it is valid");
return false;
}
}
},
errors: {
emailexist: "Nope"
}
})
和输入字段html代码:
<input id="applicant-email" required data-table="Applicant email address" data-emaildup="false" data-emailexist="email" data-emailexist-error="Enter an existant email" data-emaildup-error="You can't use the same email address more than once" data-pattern-error="Please enter a valid email address" data-required-error="Please enter an Email address." name="applicant-email" type="email" class="multisteps-form__input form-control" placeholder="Email address">
<div class="help-block with-errors"></div>