Javascript help needed for simple form validation

Question

I am currently trying to create a very simple validation script with JS. Basically, I want a alert to come up if the text inputted into a form is shorter than 5 characters, or longer than 25.

     <!doctype html>
     <html>
       <head>
       <title>Password Validator</title>
       </head>

      <body>
        <script>
        function validate()
        {  
        var yourpw = document.forms.passwordform.yourpassword.length; 

        if (yourpw < 5);
        {
        alert("password is too short");   
        return false;
        }

        if (yourpw > 25)
        {
        alert("your password is too long")
        return false;
        }
        }
        </script>


        <h1>Password Validator</h1>
        <p>Please create a new password below</p>
        <p>Be sure you password follows these guidelines</p>
        <ul>
          <li>No shorter than 5 characters</li>
          <li>No longer than 25 characters</li>
        </ul>

         <br>

         <form name="passwordform" method="post" onsubmit="validate();">
         <input type="text" name="yourpassword">
         <br>
         <input type="submit">
         </form>    

       </body>
    </html>

I am not sure what exactly I am missing or why it wont work but the goal of what i want is that when text is inputted into the text box named "yourpassword", a script will run that will show a message if either one of these conditions are met: shorter than 5 characters, or longer than 25, warning the person typing that their password does not follow the guidelines, if the password meets the guidelines, then i just want a simple confirmation message to appear. Anyways i appreciate any help as this is frustrating me and making me want to give up learning JS. Thanks

document.forms.passwordform.yourpassword is an input field, not a string. It doesn’t have a length property. You need .value before .length. — Sebastian Simon
– Sebastian Simon, Commented Dec 14, 2015 at 4:02

Ramanlfc · Accepted Answer · 2015-12-14 04:03:54Z

2

you need to first prevent the default behavour of form submit .

use

 function validate(e)
     {  
        e.preventDefault();
        var yourpw = document.forms.passwordform.yourpassword.value.length; 
       ... rest of code
}

answered Dec 14, 2015 at 4:03

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

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

Comments

Sean Perkins · Accepted Answer · 2015-12-14 04:52:25Z

0

Try updating your validate function to as follows:

  function validate(e) {
    e.preventDefault();
    var yourpw = document.getElementsByName('yourpassword')[0].value.length;

    if (yourpw < 5) {
        alert("password is too short");
        return false;
    }

    if (yourpw > 25) {
        alert("your password is too long")
        return false;
    }
}

You need to grab the input fields value, as mentioned, the input field does not have a length (@Xufox) as well as prevent the default behavior for form submission.

Edit:

Full working example:

<!doctype html>
<html>

<head>
    <title>Password Validator</title>
</head>

<body>
    <script>
    function validate(e) {
        e.preventDefault();
        var yourpw = document.getElementsByName('yourpassword')[0].value.length;

        if (yourpw < 5); {
            alert("password is too short");
            return false;
        }

        if (yourpw > 25) {
            alert("your password is too long")
            return false;
        }
    }
    </script>
    <h1>Password Validator</h1>
    <p>Please create a new password below</p>
    <p>Be sure you password follows these guidelines</p>
    <ul>
        <li>No shorter than 5 characters</li>
        <li>No longer than 25 characters</li>
    </ul>
    <br>
    <form name="passwordform" method="post" onsubmit="validate(event);">
        <input type="text" name="yourpassword">
        <br>
        <input type="submit">
    </form>
</body>

</html>

edited Dec 14, 2015 at 4:52

answered Dec 14, 2015 at 4:06

Sean Perkins

5413 silver badges10 bronze badges

9 Comments

colby42536 Over a year ago

thank you for the quick answer. One question about the "event.preventDefault();" where exactly do i put this in my script?

Sean Perkins Over a year ago

@colby42536 updated my answer. Ramanlfc demonstrated the proper place to insert the code.

colby42536 Over a year ago

just tried this and, it still wont display any messages. Maybe something is wrong with the html form? I have no other idea, but with the event.preventDefault(); inserted i still don't get alerts showing up.

Sean Perkins Over a year ago

@colby42536 did you accidentally disable alerts in your browser? Try using console.log('Test: ' + yourPw); in the validation function. Monitor the output in your browser's console (inspect element > console in Google Chrome).

colby42536 Over a year ago

got this message, in the log "TypeError: e is undefined" . I copied the exact code you posted above as well.

|

Krishna Kamal · Accepted Answer · 2015-12-14 04:14:41Z

0

Use this : but give id name yourpassword to input field .. So you can take the value easily

     var yourpw =       document.getElementById("yourpassword").value;
      var len = yourpw.length;
       If ( len < 5 )
        {
       alert ("this is short");
        }
       elseif(len>25)
        {
        alert(" too long")
       } 
      else

        {
         //// your code 


            }

answered Dec 14, 2015 at 4:14

Krishna Kamal

1241 silver badge8 bronze badges

Comments

Mostafa · Accepted Answer · 2015-12-14 04:29:29Z

-1

You can easily validate forms via RegExp.
use this function for validate 5 character limit.

var pw = document.getElementById("yourpassword").value;
function isValidatePW(PW){
var pwRegExp - /\d{5}/
return pwRegExp.test(PW);
}

answered Dec 14, 2015 at 4:29

Mostafa

1,0591 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Javascript help needed for simple form validation

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related