JQuery - проверка формы - Onblur

Question

Хорошо, у меня есть форма с проверкой jquery, которая работает, но я хочу сделать еще один шаг вперед.Он проверяется с помощью плагина, но только при отправке.Мне интересно, есть ли способ заставить его проверять размытость, чтобы человеку не приходилось ждать, пока он нажмет на "Подтвердить", чтобы узнать, есть ли у него ошибка.

Я скачал этот плагин:

http://docs.jquery.com/Plugins/Validation

Я включил файл js plug in вверху страницы, и под ним у меня есть js:

 <script>
  $(document).ready(function(){
    $("#formid").validate();
  });
  </script>

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

Если вам нужно увидеть файл js, вы можете посмотреть его или скачать здесь

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

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

Answer 1

Лучший способ, который я вижу, это использовать $.validate.element(selector) в событии размытия для каждого элемента, для которого вы хотите это поведение:

var v = $('#formid').validate();

Затем настройте события размытия:

$('#firstName').blur(function(){
   v.element('#firstName'); 
});

Смотрите это в действии здесь: http://jsfiddle.net/ryleyb/brUVZ/

Answer 2

Вы можете использовать метод 'form' валидатора, см. документацию .

Это запускает проверку формы:

$('#formid').validate().form();

Если вы хотите использовать размытие, вы можете использовать это:

$('#formid :input').blur(function() {
    $('#formid').validate().form();
});

Answer 3

В текущей версии плагина есть функция validateOnBlur, которая будет делать то, что вы просите.

Ваш код должен выглядеть следующим образом, если вы применили идентификатор #formid к форме.

<script>
  $('#formid').validateOnBlur();
</script>

Для некоторой убедительной документации по этой главе на его странице github - https://github.com/victorjonsson/jQuery-Form-Validator

Answer 4

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

$("#MainForm").validate({
            onfocusout: function (element) {                    
                if ($(element).valid())
                {
                    $(element).removeClass('input-error').addClass('input-valid');
                }
            },                

            invalidHandler: function (event, validator) {
                $.each(validator.errorList, function (index, error) {
                    $(error.element).addClass('input-error');
                });
            },

            showErrors: function () {
                //This function is kept blank so as to hide the default validation messages.
            }
        });

CSS

.input-error {
    border-color: #FF1919;
    box-shadow: 0px 0px 10px #FF1919;
}
.input-valid {
    border-color:#009500;
    box-shadow: 0px 0px 10px #009500;
}

Попробуйте.

Answer 5

Вам следует установить для параметра onfocusout значение true (прокрутите вниз, чтобы увидеть его)

$("#formid").validate({
    rules: {
        // simple rule, converted to {required:true}
        required: "required",
    },
    onfocusout: true
});

Answer 6

<script>
  $(document).ready(function(){
    $("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); });
  });
</script>