web-dev-qa-db-fra.com

Comment utiliser jQuery pour onsubmit et vérifier si la valeur est comprise entre 2 et 5 caractères?

Disons que j'ai un champ de texte:

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

et j'ai un peu de jQuery:

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

    user.submit(function() {

    })
})

Je souhaite vérifier si la longueur de la valeur entrée dans username est comprise entre 2 et 5 caractères après ma soumission. Si ce n'est pas alors quelque chose se passe.

Je ne suis pas trop sûr de ce que je devrais être dans la user.submit(function(){}).

jqueryformssubmitcharacter
13
Dora

D'abord, vous aurez besoin d'un formulaire réel:

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

puis:

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

Ou en HTML5, vous pouvez utiliser l'attribut pattern (non pris en charge par Safari et IE9 - et ci-dessous):

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

FIDDLE

35
adeneo

Vous pouvez vérifier la valeur du champ de saisie avec user.val() et la longueur de la chaîne avec user.val().length.

De cette façon, vous pouvez faire quelque chose comme ça:

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

J'ai fait un Fiddle

Vous pouvez utiliser une déclaration comme

$(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);
    });
});

Et HTML

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

3
Johan Hoeksma

Liez submit à form au lieu de type d'entrée texte et vérifiez sa valeur dans l'événement submit. Il serait préférable d’attribuer un identifiant à un formulaire et d’utiliser le sélecteur d’identifiant de formulaire pour lier l'envoi.

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