Как отобразить ошибку onblur, когда поле пустое с помощью jQuery Validate? - PullRequest
Новая
       16

Как отобразить ошибку onblur, когда поле пустое с помощью jQuery Validate?

2 голосов
/ 09 апреля 2011

Я использую jQuery Validate для проверки формы. Параметр onfocusout имеет значение true, однако он говорит следующее:

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

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

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

Может кто-нибудь сказать мне, как это сделать?

Ответы [ 4 ]

3 голосов
/ 11 июня 2012

Данный плагин имеет функцию, специально предназначенную для немедленной проверки на одном конкретном элементе, называемом «элемент».Вы можете использовать это в функции onfocusout для принудительной проверки этого конкретного элемента.

Пример: 

$('form').validate({
    onfocusout: function(e) {
        this.element(e);
    }
});

См. Jsfiddle demo .

1 голос
/ 03 мая 2012

Я пришел к этому сообщению после того, как столкнулся с той же проблемой, заполнив ее, а затем очистил обязательное поле формы. Я использовал пример слияния формы начальной загрузки Twitter с разметкой jquery.validate.js, найденной здесь: http://alittlecode.com/jquery-form-validation-with-styles-from-twitter-bootstrap/

Я решил, используя следующий код: 

onfocusout: function(label) {
        if($(label).val() == ''){
            $(label).closest('.control-group').removeClass('success'); 
        }
    }

Вот полный сценарий в контексте: 

$(document).ready(function() {
    $('#contact_form').validate({
    rules: {
      name: {
        minlength: 2,
        required: true
      },
      email: {
        required: true,
        email: true
      },
      message: {
        minlength: 2,
        required: true
      }
    },
    onfocusout: function(label) {
        if($(label).val() == ''){
            $(label).closest('.control-group').removeClass('success'); 
        }
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label
            .text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    },
    submitHandler: function(form) {
            $(form).ajaxSubmit({
                target: '#success', 
                success: function() { 
                    $('#contact_form_wrapper').hide();
                    $('#success').html('<h3>Thank you for your enquiry</h3><p class="intro-text">We will endeavour to respond to your message within 72 hours.</p>').fadeIn('slow'); 
                } 
            });         
        }
  });
});
0 голосов
/ 09 апреля 2011

Попробуйте это: 

$('input').blur(function(){
    if($(this).val() == ''){
        alert('Enter something');//here you call your desired process   
    }
});
0 голосов
/ 09 апреля 2011

добавьте class"required" к вашему вводу, чтобы оно выглядело как 

<input type="text" class="required" />

. Это сделает обязательное поле и при размытии вызовет ошибку, если поле останется пустым.

...