#javascript #jquery #validation
Вопрос:
Версия TLDR: У меня есть пользовательская проверка jquery, которая возвращает правильные значения, но правило не применяется.
У меня есть пользовательское правило проверки, которое выглядит следующим образом:
$.validator.addMethod("isDomainValid", function(value, element) {
var domain = value.split("@");
$.get('/api/validate-domain/' domain[1], function(data, status) {
domain = JSON.parse(data);
console.log(domain['status'] === 'valid');
return (domain['status'] === 'valid');
});
});
Эта проверка вызывает PHP API, который проверяет, является ли доменное имя электронной почты действительным, следовательно, правильным. Этот API возвращает правильные значения, и console.log() также отражает правильные значения, которые я возвращаю в виде логического значения. Пока все хорошо…
Я называю это правило проверки следующим образом:
validator.validate({
rules: {
email: {
required: true,
email: true,
isDomainValid: true,
},
});
У меня также есть некоторые пользовательские сообщения об ошибках (я думаю, возможно, неуместные), такие как следующие:
messages: {
email: {
required: "The Email Address cannot be empty",
isDomainValid: "Please correct the Email Address after the @ character",
email: "Invalid Email Address format",
}, },
Все мои проверки, включая еще одну пользовательскую проверку, работают безупречно, за исключением этой. Вот весь код, который я запускаю на случай, если кто-то захочет все это увидеть. Опять же, все проверки работают, кроме пользовательской проверки isDomainValid.
var validator = $('#checkout_form');
$.validator.addMethod("checkPoBox", function(value, element) {
let cleansedValue = $.trim(value.toLowerCase()).replace(/[^a-zA-Z] /g, '');
let checked = $('#ship-box').prop('checked') ? true : false;
if (/pobox/i.test(cleansedValue) amp;amp; checked amp;amp; element.name == 'shipping_address') {
return false;
}
if (/pobox/i.test(cleansedValue) amp;amp; !checked amp;amp; element.name == 'billing_address') {
return false;
}
return true;
});
$.validator.addMethod("isDomainValid", function(value, element) {
var domain = value.split("@");
$.get('/api/validate-domain/' domain[1], function(data, status) {
domain = JSON.parse(data);
console.log(domain['status'] === 'valid');
return (domain['status'] === 'valid');
});
});
validator.validate({
rules: {
email: {
required: true,
email: true,
isDomainValid: true,
},
billing_first_name: {
required: true
},
billing_last_name: {
required: true
},
billing_address: {
required: true,
checkPoBox: true
},
billing_city: {
required: true
},
billing_state: {
required: true
},
billing_zip: {
required: true,
minlength: 5,
maxlength: 5,
digits: true
},
billing_phone: {
required: true,
minlength: 10,
maxlength: 10,
digits: true
},
name_on_credit_card: {
required: true
},
credit_card_number: {
required: true,
creditcard: true
},
expiration_month: {
required: true
},
expiration_year: {
required: true
},
cvv: {
required: true,
minlength: 3,
maxlength: 4,
digits: true
},
shipping_first_name: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_last_name: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_address: {
required: function () {
return $('#ship-box').prop('checked');
},
checkPoBox: true
},
shipping_city: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_state: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_zip: {
required: function () {
return $('#ship-box').prop('checked');
},
minlength: 5,
maxlength: 5,
digits: true
},
shipping_phone: {
required: function () {
return $('#ship-box').prop('checked');
},
minlength: 10,
maxlength: 10,
digits: true
}
},
messages: {
email: {
required: "The Email Address cannot be empty",
isDomainValid: "Please correct the Email Address after the @ character",
email: "Invalid Email Address format",
},
billing_first_name: "First Name cannot be blank",
billing_last_name: "Last Name cannot be blank",
billing_address: {
required: "Address cannot be blank",
checkPoBox: "Products cannot be shipped to a P.O. Box"
},
billing_city: "Town/City cannot be blank",
billing_state: "Please select a State",
billing_zip: "Please enter a valid 5 digit Zip Code",
billing_phone: "Please enter a valid 10 digit Phone Number",
name_on_credit_card: "Name on Card cannot be blank",
credit_card_number: "Please enter a valid Credit Car Number",
expiration_month: "Please select an Expiration Month",
expiration_year: "Please select an Expiration Year",
cvv: "Please enter a valid 3 or 4 digit CVV",
shipping_first_name: "First Name cannot be blank",
shipping_last_name: "Last Name cannot be blank",
shipping_address: {
required: "Address cannot be blank",
checkPoBox: "Products cannot be shipped to a P.O. Box"
},
shipping_city: "City cannot be blank",
shipping_state: "Please select a State",
shipping_zip: "Please enter a valid 5 digit Zip Code",
shipping_phone: "Please enter a valid 10 digit Phone Number",
},
invalidHandler: function(event, validator) {
if(validator.numberOfInvalids() > 0) {
event.preventDefault();
$('button#place_order_btn').text("PLACE ORDER");
return false;
}
},
submitHandler: function (validator) {
validator.submit();
}
});
Любая помощь будет очень признательна.
Ответ №1:
Я думаю, что вы столкнулись с проблемой, когда возвращаемое значение функции обратного вызова success теряется в $.get методе. По моему опыту, мне приходилось вручную вызывать ошибки как часть обратного вызова при проверке сервера аналогичным образом.
В качестве альтернативы, я покопался и нашел некоторую документацию по проверке jQuery, которая, похоже, немного упростит то, что вы пытаетесь сделать: https://jqueryvalidation.org/remote-method/
Попробуйте обновить rules.email свойства, заменив isDomainValid :
rules: {
email: {
required: true,
email: true,
remote: {
url: function() {
var value = $("[name='email']").val();
var domain = value.split("@");
return "/api/validate-domain/" domain[1];
},
}
},
Вы можете удалить вызов, в $.validator.addMethod котором регистрируется метод «isDomainValid».
Кроме того, не забудьте обновить isDomainValid в другом месте, заменив его на remote , чтобы сообщения были правильными.
messages: {
email: {
required: "The Email Address cannot be empty",
email: "Invalid Email Address format",
remote: "Please correct the Email Address after the @ character",
},