Цвет границы проверки JQuery

0

Я написал фрагмент кода для проверки некоторого текстового поля, но он не работает так, как мне это нужно.

Я проверяю каждое поле для допустимого ввода двумя способами: один раз для действительного адреса электронной почты (с использованием регулярного выражения) и один раз, чтобы проверить, пустое поле. Затем я показываю любые сообщения об ошибках и изменяю цвет рамки соответствующих текстовых полей.

Проблема, с которой я сталкиваюсь, возникает, когда я хочу сбросить цвет границы, если в процессе проверки не было никаких проблем, но я думаю, что способ, которым я настроил свой код, затрудняет достижение этого.

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");
    }
}
}

Вы можете заметить в коде, что проверка проверки выполняется, а затем пустая проверка поля. Поэтому, если действительная функция электронной почты завершается с ошибкой, отображается ошибка, и граница меняется, а затем пустая полевая функция срабатывает и проходит сразу, поэтому цвет сразу возвращается обратно к старому цвету, который мне не нужен.

Я подозреваю, что моя функция должна быть реструктурирована для достижения этого, но я не уверен, как это сделать, поэтому любая помощь будет очень оценена.

Теги:
validation

1 ответ

0

В этом случае я бы рекомендовал использовать класс для изменения границ текстовых полей вместо простого изменения 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 зависимости от случая.

Надеюсь, это поможет вам!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню