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

Southsoutheast

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>

Insufficiency

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

Compressibility

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>

Bengt

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

Insoluble

Answer 5

you should try form validation for this kind of verification

Seaside

Your answer could be improved by providing an example of the solution and how it helps the OP. – Bernardina