return false oder e.preventdefault funktioniert nicht

Question

Ich habe ein Formular mit einem Textfeld und ich gebe 50 Char Limit in das mit unten Skript

Es funktioniert gut.

, aber wenn ich auf einreichen klicken, wird seine After-Show eine Warnmeldung einreichen bekommen seine nicht

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> 

bitte helfen Sie mir vorgelegt zu finden, was in meinem Skript falsch ist.

Answer 1

Nie Onclick mit Taste Erklärung verwenden, weil es wie eine enge Kopplung Coding-Standards ist. Stattdessen tu es so:

<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

Wenn Sie das Ereignis submit unterbrechen möchten, müssen Sie den Handler zum Element form hinzufügen, nicht den button. Ansonsten handle und breche nur die Schaltfläche, nicht die Formularaktion.

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

Einfach anschauliches Beispiel: https://jsfiddle.net/ukynbn0s/

Answer 3

Try Click-Ereignis hinzuzufügen:

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