jquery. css () метод не работает, пока не будет добавлен или удален какой-либо символ

Question

Для проверки html ячеек таблицы я реализовал механизм контроля фазы sumbit, чтобы проверять, заполнены ли обязательные поля и допустимы значения.

Это было мое первое решение, основанное на моем исследовании:

// validate table cells
$(document).ready(function() {
    var namePattern = /^[a-zA-Z\s,.'\-\\pL]{1,600}$/;
    var telPattern = /^([+]\d{1,2})(\d{10})$/;   

    $('#platform-edit').submit(function(event) {     
        var isErrorExist = false;
        var fields = $('.validateName');
        $.each(fields, function(i, field) {

            var value = $(field).val();            
            if (value == null || value == ""){
                $(field).css('border-color', 'red');
                isErrorExist = true;
            } else{
                $(field).css('border-color', '');
                if (!namePattern.test(value)) { // Pattern to check if value is valid
                    $(field).css('color', 'red');
                    isErrorExist = true;
                } else {
                    $(field).css('color', '');
                }
            }

        });

        fields = $('.validateTel');
        $.each(fields, function(i, field) {

            var value = $(field).val();

            if (value != "" && !telPattern.test(value)) { // Pattern to check if value is valid
                $(field).css('color', 'red');
                isErrorExist = true;
            } else {
                $(field).css('color', '');
            }

        });


        if(isErrorExist){
            event.preventDefault();
        }

    });

});

То, что я хотел сделать, очень просто. Если обязательное поле пусто, измените цвет границы, если поле не пустое, но введенное значение не соответствует шаблону, измените цвет текста. Однако это не работает должным образом с полем .validateTel . В режиме отладки я вижу, что строка $(field).css('color', 'red'); работает и добавляет стиль к элементу. Но цвет не меняется, пока я не добавлю или не удалю символ.

Я хочу знать причину этой проблемы.

Мы очень ценим все советы!

Answer 1

Это план Б, а не настоящий ответ. Мне все еще интересно решение моей первой реализации.

Я только что изменил

$(field).css('color', 'red');

на

$(field).attr('style','color:red;');