How to use jQuery to onsubmit and check if the val

Question

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(){}).

Answer 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

Answer 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')
} 

Answer 3

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)
     {
     }
});

Answer 4

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" />