jQuery: восстановление исходного CSS ('значение') при проверке формы

Question

Я новичок в jQuery, но давно являюсь разработчиком Perl и хорошо знаю регулярные выражения, поэтому я не хочу использовать плагин jQuery Validation.

Я пытаюсь проверить следующие 3 веб-формы, каждая из которых имеет поле ввода текста или текстового поля # blah_txt и кнопку отправки # blah_btn :

Я проверяю их с помощью следующего кода jQuery, который, кажется, хорошо работает:

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
        $('#mks_btn').click(function(e) {
                $('#cl_txt').css('border', '2px solid black');
                $('#comment_txt').css('border', '2px solid black');

                if (! $('#mks_txt').val().match(/^(CL\s*)?[0-9]{6,}$/i)) {
                        $('#mks_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
        $('#cl_btn').click(function(e) {
                $('#mks_txt').css('border', '2px solid black');
                $('#comment_txt').css('border', '2px solid black');

                if (! $('#cl_txt').val().match(/^(MKS\s*)?[0-9]{6,}$/i)) {
                        $('#cl_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
        $('#comment_btn').click(function(e) {
                $('#mks_txt').css('border', '2px solid black');
                $('#cl_txt').css('border', '2px solid black');

                if ($('#comment_txt').val().length < 2) {
                        $('#comment_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
});
</script>

Моя (косметическая) проблема:

Когда пользователь вводит недопустимое значение в первое текстовое поле («MKS») и нажимает кнопку «Добавить MKS», мой код предотвратит отправку формы и сделает границу текстового поля сплошным красным.Затем пользователь передумает и решает ввести текст в другую веб-форму и снова вводит туда недействительные данные.Тогда у меня уже было бы 2 красных рамки, которые раздражали бы пользователя.

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

Поэтому мне интересно, смогу ли я восстановить этот оригинал css ('border') значение для всех полей ввода текста каким-либо образом - при нажатии кнопки (или, возможно, размытия или какого-либо другого события, указывающего, что пользователь переключился на другую веб-форму?)

Спасибоза любые предложения!Алекс

ОБНОВЛЕНИЕ

Мой браузер - Firefox 3.6.12 / WinXP, но я хочу, чтобы все браузеры работали: -)

ОБНОВЛЕНИЕ 2

HTML-код для 3 веб-форм приведен ниже, и у меня есть только текст и ссылки, кроме того, на веб-странице больше нет элементов:

<form>
<tr valign="top">
<th>MKS</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<input name="toggle_mks" id="mks_txt" type="text" size="10" maxsize="10">
<input type="submit" id="mks_btn" value="Add MKS" class="toggle">
</td></tr>
</form>

<form>
<tr bgcolor="#EEEEEE" valign="top">
<th>CL</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<input name="toggle_cl" id="cl_txt" type="text" size="10" maxsize="10">
<input type="submit" id="cl_btn" value="Add CL" class="toggle">
</td></tr>
</form>

<form>
<tr valign="top">
<th>Comments</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<textarea name="comment" id="comment_txt" rows="4" cols="60" maxsize="320">
</textarea>
<input type="submit" id="comment_btn" value="Add comment" class="toggle">
</td></tr>
</form>

Answer 1

вместо

$('#mks_txt').css(

создайте два css-класса в таблице стилей, один для нормального состояния и один для состояния ошибки.примените класс нормального состояния в HTML и установите класс состояния ошибки через jQuery.

.className {
   border: 2px solid red;
}

используйте

 $('#mks_txt').addClass("className");

для добавления класса и используйте

 $('#mks_txt').removeClass("className");

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

Обновление: вы можете сделать что-то вроде:

    /** css: **/
    input {
      border:solid 1px;
    }
    .error {
       border-color:#f00;
    }     


    /** script: **/

            var resetForm = function () {
          $('#cl_txt, #comment_txt, #mks_txt').removeClass('error');
    }
    var renderError = function (elm, isValid) {
          if(!isValid){
             elm.addClass('error');
          }
    }
    var validate = function (value, reg){
        return value.match(reg);
    }

    $('#mks_btn').click(function(e) {
            resetForm();
            var elm = $('#mks_txt');
            renderError(elm, validate(elm.val(), 
                                         /^(CL\s*)?[0-9]{6,}$/i))
            e.preventDefault();
    });
    $('#cl_btn').click(function(e) {
            resetForm();
            var elm = $('#cl_txt');
            renderError(elm, validate(elm.val(), 
                            /^(MKS\s*)?[0-9]{6,}$/i))
            e.preventDefault();
    });
    $('#comment_btn').click(function(e) {

            resetForm();
            var elm = $('#comment_txt');
            renderError(elm, validate(elm.val(),
                             elm.val().length < 2))
            e.preventDefault();
    });

Answer 2

Я бы сохранил значение класса элемента в коллекции элемента .data(), как только страница загрузится.

$('input')each(function(i) { 
   $(this).data('original_class', $(this).attr('class'))
});

Затем используйте .data('original_class'), чтобы получить его.

UPDATE: Я бы оставил отдельные свойства CSS в покое, так как это может привести к путанице, и теперь вы вставляете стили CSS в свой JavaScript. Я бы определил класс .error в таблицах стилей и просто включил или выключил его.

Answer 3

Создайте правила CSS в своей таблице стилей для класса ошибок (что-то вроде .formerror), затем используйте:

$('#IDOFBOX').toggleClass('formerror');

Тогда CSS может быть

.formerror{border: 2px solid red;}

Answer 4

Рассмотрите возможность установки классов CSS вместо необработанного CSS в вашем jQuery - его проще поддерживать (цвета и косметика идут в CSS) и давайте работать над более высокой абстракцией.

Например, вы устанавливаете класс CSS «validationError» для нужного элемента HTML, если он не проходит проверку (выделите его красной рамкой во внешней таблице стилей CSS), и просто удалите его снова, если хотите вернуться к значению по умолчанию.

http://api.jquery.com/addClass/