Javascript ограничительную проверку отправить

Question

У меня есть этот JQuery код, чтобы ограничить текст в текстовом поле до 250 символов:

$('#postform textarea').keypress(function() { 
     if($(this).val().length >= 250) { 
      $(this).val($(this).val().slice(0, 250)); 
      return false; 
     } 
    }); 

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

Любая помощь приветствуется.

Answer 1

Вместо keypress случае использовать sumbit событие на форме:

$('#form').submit(function(event) { 
 
    var $textarea = $(this).find('textarea') 
 
    if($textarea.val().length >= 250) { 
 
     // do what you want 
 
     // show an error or 
 
     // E.g : highlight the textarea in red 
 
     $textarea.addClass('input-error'); 
 
     return false; 
 
    } 
 
    else { 
 
     $textarea.removeClass('input-error'); 
 
    } 
 
});

.input-error { 
 
    border-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" action="" method="form"> 
 
    <textarea></textarea> 
 
    <button type="submit">Submit</button> 
 
    </form>

Answer 2

Попробуйте использовать maxlength атрибут.

<textarea rows="4" cols="50" maxlength="10" placeholder='You can type just 10 characters'> 
 
</textarea>

Примечание: Атрибут MaxLength из TEXTAREA тега не поддерживается в Internet Explorer 9 и более ранних версий, или в Opera 12 и более ранних версий.

Надеюсь, это поможет.

Answer 3

Да, вы можете. Вам просто нужно сделать чек на отправке текстового поля и увидеть, что он не превышает лимита.

$('#my-form').submit(function() { 
    if($('input[name="myTextArea"]').length >= 250) { 
    alert("Hey your text is over 250"); 
    } 
}) 

Answer 4

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

$('#postform textarea').keypress(function() { 
 
     var c_left = lettersTyped($(this)); 
 
     if((c_left-20) < 0){ 
 
      $('p').html(20-c_left+' characters left').removeClass('error'); 
 
     } 
 
     else{ 
 
      $('p').html('Limit exceeded!').addClass('error'); 
 
      } 
 
    }); 
 
    function lettersTyped(text){ 
 
     var len = text.val().length;   
 
     return len; 
 
    } 
 

 
     $('#postform .submit').on('click', function(){ 
 
     var text = $('#postform textarea'); 
 
     if(lettersTyped(text) > 20){ 
 
      alert('You have exceeded the limit'); 
 
     } 
 
     else{ 
 
      //not submitting the form here, but you can keep it true. 
 
      return false; 
 
     } 
 
     });

p{ 
 
color: lightgreen; 
 
} 
 
.error{ 
 
color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<form id="postform"> 
 
<textarea placeholder="Start typing.."></textarea> 
 
<p></p> 
 
<input type="submit" class="submit"/> 
 
</form>

Answer 5

$('#postform').submit(function() { 
    if($('#postform textarea').val().length >= 250) { 
     //message 
     return false; 
    } 
    return true; 
});