JQuery валидация символов минимум

Question

Я не знаю, что я делаю неправильно, но в основном это то, что у меня есть.

JQuery:

$(document).ready(function(){
 $('form#status_form').submit(function(){ 
         var statusV = $('input#status_updated2').val();
         if(statusV.length > 255)
         {
         $('em#statusError').fadeIn().fadeOut(5000);
         }
         else
         {
        //do cool stuff

        }
    }); 
});

HTML-форма, из которой он извлекает:

<em style="display:none;"id="statusError">*NO MORE THAN 255 CHARACTERS</em>
<form id="status_form" name="status_form">
<input type="text" id="status_updated2"  size="57" />
</form>

Если я введу более 255 символов, сообщение об ошибке не появится так, как должно, и функции в выражении "else" пройдут.Что мне не хватает?

Answer 1

Логика в порядке. Но вы можете забыть вызвать e.preventDefault (), чтобы предотвратить отправку #status_form, что нарушает сообщение statusError.

 $('form#status_form').submit(function(e){
    ...
    $('em#statusError').fadeIn().fadeOut(5000);
    e.preventDefault();

Answer 2

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

$(document).ready(function(){
     $('form#status_form').submit(function(event){ 
         var statusV = $('input#status_updated2').val();
         if(statusV.length > 255)
         {
             event.preventDefault(); // stop the form submitting if there's an error.
             $('em#statusError').fadeIn().fadeOut(5000);
         }
         else
         {
            //do cool stuff
         }
     }); 
});

См. Jsfiddle здесь для рабочего примера.

Answer 3

Скорее всего, вам нужно захватить событие отправки формы по умолчанию. Попробуйте:

$('form#status_form').submit(function(evt){
  evt.preventDefault();    
  ...
}

Answer 4

Как насчет привязки к событию keydown и return ing false, если уже слишком много символов:

$('input[type="text"]').on('keydown', function (event) {

    //check if the character limit has already been reached, but always allow backspace key strokes and delete key strokes
    if (this.value.length >= 255 && event.which != 8 && event.which != 46) {

        //this will stop the current key stroke from being added to the value of the input
        return false;
    }
});

Вот демоверсия: http://jsfiddle.net/5yRK2/

event.which != 8 && event.which != 46 -> это позволяет клавишам возврата и удаления делать свое дело (так как они удаляют символы вместо того, чтобы добавлять их).