Я написал фрагмент кода для проверки некоторого текстового поля, но он не работает так, как мне это нужно.
Я проверяю каждое поле для допустимого ввода двумя способами: один раз для действительного адреса электронной почты (с использованием регулярного выражения) и один раз, чтобы проверить, пустое поле. Затем я показываю любые сообщения об ошибках и изменяю цвет рамки соответствующих текстовых полей.
Проблема, с которой я сталкиваюсь, возникает, когда я хочу сбросить цвет границы, если в процессе проверки не было никаких проблем, но я думаю, что способ, которым я настроил свой код, затрудняет достижение этого.
function validation() {
var errorList = '';
validate_email("input[id$='tbTheirEmail']", "Sorry, the recipients email address is invalid.");
validate_email("input[id$='tbYourEmail']", "Sorry, your email address is invalid.");
validate_field("input[id$='tbTheirEmail']", 'Sorry, you need to enter a recipients email address.');
validate_field("input[id$='tbYourEmail']", 'Sorry, you need provide your email address.');
if (errorList <= 0) {
SendEmail();
$("#popupErrorMessage ul").html('');
}
else {
$("#popupErrorMessage ul").html(errorList);
}
function validate_email(email, message) {
var regex = (/[a-z0-9!#$%&'*+\/=?^_'{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_'{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i);
if ($(email).val() != '') {
if (!regex.test($(email).val())) {
errorList += "<li>" + message + "</li>";
$(email).css("border-color", "#da1f27");
}
else{
$(email).css("border-color", "#e6e7e8");
}
}
}
function validate_field(element, message) {
if ($(element).val() == '') {
errorList += "<li>" + message + "</li>";
$(element).css("border-color", "#da1f27");
}
else{
$(element).css("border-color", "#e6e7e8");
}
}
}
Вы можете заметить в коде, что проверка проверки выполняется, а затем пустая проверка поля. Поэтому, если действительная функция электронной почты завершается с ошибкой, отображается ошибка, и граница меняется, а затем пустая полевая функция срабатывает и проходит сразу, поэтому цвет сразу возвращается обратно к старому цвету, который мне не нужен.
Я подозреваю, что моя функция должна быть реструктурирована для достижения этого, но я не уверен, как это сделать, поэтому любая помощь будет очень оценена.
В этом случае я бы рекомендовал использовать класс для изменения границ текстовых полей вместо простого изменения CSS. Что вам нужно сделать, так это настроить два новых класса на вашем CSS. Например:
.validBorder {
border-color: #e6e7e8;
border-width:1px;
border-style: solid;
}
.invalidBorder {
border-color: #da1f27;
border-width:1px;
border-style: solid;
}
Затем вместо вызова $(element).css("border-color", "#da1f27");
просто вызовите $(element).addClass('validBorder');
или invalidBorder
зависимости от случая.
Надеюсь, это поможет вам!