How to use jQuery to onsubmit and check if the val

问题:

Let's say I have a text field:

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

and I have some jQuery:

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

    user.submit(function() {

    })
})

I want to check if the length of the value entered in username is between 2 - 5 characters after I submit. If it's not then something happens.

I'm not too sure what I should be inside the user.submit(function(){}).

回答1:

First you'll need an actual form:

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

then:

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

Or in HTML5 you can use the pattern attribute (not supported in Safari and IE9-and below):

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

FIDDLE

回答2:

You can check the value of the input field with user.val() and the length of the string with user.val().length.

That way you can do something like this:

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

回答3:

I made a Fiddle

You can use a statement as

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

And HTML

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

回答4:

Bind submit to form instead of input type text and check its value in submit event. It would be better to assign some id to form and use form id selector to bind submit.

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