How to use jQuery to onsubmit and check if the value is 2 - 5 characters?

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):

<!-- Fiddle: http://jsfiddle.net/ymdQq/ -->

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

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

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

<!-- Fiddle: http://jsfiddle.net/zoutepopcorns/b5Kqs/ -->

<form id="form" mehtod="POST" action="https://www.example.com">
  username: <input type="text" id="username" class="required" />
  <input type="submit" />
</form>

<div id="output"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>