Come usare jQuery per onsubmit e controllare se il valore è di 2 - 5 caratteri?

Question

Diciamo che avere un campo di testo:

Username: <input type="text" id="username" class="required" /> 
<input type="submit" /> 

e ho qualche jQuery:

$(document).ready(function() { 
    user = $("#username"); 

    user.submit(function() { 

    }) 
}) 

voglio verificare se la lunghezza del valore immesso nel username è compresa tra 2-5 caratteri dopo Mi sottometto. Se non lo è, allora succede qualcosa.

Non sono sicuro di cosa dovrei essere all'interno dello user.submit(function(){}).

Answer 1

primo luogo è necessario un modulo vero e proprio:

<form id="myForm"> 
    Username: <input type="text" id="username" class="required" /> 
    <input type="submit" /> 
</form> 

poi:

$(document).ready(function(){ 
    $('#myForm').on('submit', function(e){ 
     e.preventDefault(); 
     var len = $('#username').val().length; 
     if (len < 6 && len > 1) { 
      this.submit(); 
     } 
    }); 
}); 

O in HTML5 è possibile utilizzare l'attributo pattern (non supportato in Safari e IE9-e sotto):

<form id="myForm"> 
    Username: <input type="text" id="username" pattern=".{2,5}" required /> 
    <input type="submit" /> 
</form> 

FIDDLE

Answer 2

Associare inviare a form anziché tipo di input testo e controllare il suo valore nell'evento di invio. È preferibile assegnare un ID per formare e utilizzare il selettore ID modulo per associare l'invio.

$('form').submit(function(){ 
     username = $('#username').val(); 
    if(username.length > 1 && username.length < 6) 
    { 
    } 
}); 

Answer 3

È possibile controllare il valore del campo di immissione con user.val() e la lunghezza della stringa con user.val().length.

questo modo si può fare qualcosa di simile:

if(user.val().length < 2 || user.val().length > 5) { 
    console.log('test') 
} 

Answer 4

ho fatto un Fiddle

È possibile utilizzare un'istruzione come

$(document).ready(function(){ 
    $("#form").submit(function(e) { 
     length = $("#username").val().length; 
     if((length > 2 && length < 5)) { 
      $("#output").html("correct, logging in"); 
     } else { 
      $("#output").html("incorrect, must have 3 or 4 chars"); 
     } 
     return (length > 2 && length < 5); 
    }); 
}); 

e HTML

<form id="form" method="POST" action="http://www.cnn.com"> 
username: <input type="text" id="username" class="required" /> 
<input type="submit" />