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

您没有看到消息的原因是，如果出现错误，您没有阻止默认操作（表单提交）的发生。你可以这样停止：

$(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 2

如果已经有太多字符，那么绑定到keydown事件和return到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-->这允许退格键和删除键执行它们的操作（因为它们删除字符而不是添加字符）。

Answer 3

您很可能需要捕获默认的表单提交事件。尝试：

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

Answer 4

逻辑很好。但是您可能忘记调用e.preventDefault（）来阻止#status_form提交，这会破坏statusError消息。

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