возвращают ложные или e.preventdefault не работает

Question

У меня есть одна форма с одним текстовым полем и я даю 50 предел обугленного в том, что с ниже сценария

Его работает отлично.

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

function charLimit(e) { 
    var value = $("#concept_name").val(); 
    if(value.length > 50){ 
     alert("Maximum limit is 50 character"); 
     return false; 
    }else{ 
     return true; 
    } 
<%= f.text_area :name, rows:1 , :required => true, :onkeypress=> "charLimit()" %> 

<button type="submit" onclick="charLimit()">submit</button> 

, пожалуйста, помогите мне найти то, что не так в моем сценарии.

Answer 1

Никогда не используйте OnClick с кнопкой декларации, потому что это как жесткие нормы сочетания кодирования. Вместо этого сделайте это так:

<button type="submit" id="submitBtn">submit</button> 

$("#submitBtn").on('click',function(event){ 

    var value = $("#concept_name").val(); 

    if(value.length > 50){ 
     alert("Maximum limit is 50 character"); 
     event.preventDefault(); 
    } 

}); 

Answer 2

Если вы хотите разорвать событие submit, вы должны добавить обработчик к элементу form, а не к button. В противном случае вы будете обрабатывать и разрывать кнопку, а не действие формы.

<form action="foo.html" onsubmit="return charLimit()"> 
    <!-- content --> 
    <button type="submit">submit</button> 
</form> 

Простой живой пример: https://jsfiddle.net/ukynbn0s/

Answer 3

Попытка добавить событие щелчка:

$("button").click(function(){ // add button click event 
 
    var value = $("#concept_name").val(); 
 
    if(value.length > 50){ 
 
     alert("Maximum limit is 50 character"); 
 
     return false; // it will not submit form if return false 
 
    }else{ 
 
     alert("Form will be submitted"); 
 
     return true; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<form method="post"> 
 
    <textarea id="concept_name" name="concept_name"></textarea> 
 
    <button type="submit">submit</button> 
 
</form>