HTML Form JS Validation

Question

I'm trying to validate my login form so that the field will have a min/max length before the values being posted to my PHP file.

JavaScript:

function loginValidation() {
    var user = document.login.username.value;
    var pass = document.login.password.value;

    if (user.length <= 6 || user.length > 20) {
        alert("Please make sure the username is between 7 and 20 characters.");
        return false;
    }

    if (pass.length <= 8 || pass.length > 50) {
        alert("Please make sure the password field is between 9 and 50 characters.");
        return false;
    }
}

HTML:

<form name="login" onsubmit="loginValidation()" action="login.php" method="post">
    <div class="form-group row">
        <label for="username" class="lead para col-sm-4">Username</label>
        <input type="text" class="form-control transparent col-sm" id="username" name="username" placeholder="Username">
    </div>
    <div class="form-group row">
        <label for="password" class="lead para col-sm-4">Password</label>
        <input type="password" class="form-control col-sm" id="password" name="password" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-outline-primary">LOGIN</button>
</form>

It seems that the code is ignoring the Function or that it just doesn't work (errors maybe?).

Other information that might be useful to know is that the JavaScript file with all my functions is external.

<script src="/JS/functions.js"></script>

Not sure if you're aware, but you can use minlength and maxlength attributes on HTML inputs to do this sort of thing for you instead of using JS: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented Dec 8, 2017 at 23:13

halfer · Accepted Answer · 2018-03-01 22:18:04Z

2

Working fiddle.

You are just missing the return in the function call in your onsubmit, should be like :

<form name="login" onsubmit="return loginValidation()" action="login.php" method="post">
_____________________________^^^^^^

It will be better to attach the event in your JS part :

document.querySelector('form[name="login"]').addEventListener("submit", loginValidation);

function loginValidation() {
  var user = document.login.username.value;
  var pass = document.login.password.value;

  if (user.length <= 6 || user.length > 20) {
    alert("Please make sure the username is between 7 and 20 characters.");
    return false;
  }

  if (pass.length <= 8 || pass.length > 50) {
    alert("Please make sure the password field is between 9 and 50 characters.");
    return false;
  }
  return true;
}

<form name="login" onsubmit="return loginValidation()" action="login.php" method="post">
  <div class="form-group row">
    <label for="username" class="lead para col-sm-4">Username</label>
    <input type="text" class="form-control transparent col-sm" id="username" name="username" placeholder="Username">
  </div>
  <div class="form-group row">
    <label for="password" class="lead para col-sm-4">Password</label>
    <input type="password" class="form-control col-sm" id="password" name="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-outline-primary">LOGIN</button>
</form>

edited Mar 1, 2018 at 22:18

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Dec 8, 2017 at 22:46

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Luke Holland Over a year ago

I tried with and without it, doesn't work either way. It just skips the JavaScript code as if it weren't there.

Zakaria Acharki Over a year ago

Should work, check the fiddle jsfiddle.net/z_acharki/jnwrc5ay/440

Luke Holland Over a year ago

Ahh, yes it works only when the function is used within the HTML page (inline JavaScript) but when using the external file it doesn't work. :( Anyway to fix that? Thanks for the solution also.

Stephen P Over a year ago

What? No - I never put my javascript inline in my html pages and my validations work fine ... but I also never put event handlers inline like onsubmit="...", I always attach event handlers: element.addEventListener("submit" ...);

Zakaria Acharki Over a year ago

@StephenP note is correct, it will be better to attach the event in your JS, check my update..

|

Collectives™ on Stack Overflow

HTML Form JS Validation

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related