How to set minimum length of password

Question

I am currently working on a html form. How do I set the minimum length of the password to 8 so that it will reject any password the user inputs that are less than 8. How to do this?

Here is the code:

<div id="login-form">
            <form method="post">
            <table align="center" width="30%" border="0">
            <tr>
            <td><input type="text" name="email" placeholder="Your Email" required /></td>
            </tr>
            <tr>
            <td><input type="password" name="pass" placeholder="Your Password" required /></td>
            </tr>
            <tr>
            <td><button type="submit" name="btn-login">Sign In</button></td>
            </tr>
            <tr>
            <td><a href="register.php">Sign Up Here</a></td>
            </tr>
            </table>
            </form>
        </div>

Answer 1

If you are using HTML5 you can use the pattern and required attributes for the input tag:

<input type="password" pattern=".{8,}"   required title="8 characters minimum"> <input type="password" pattern=".{8,12}" required title="8 to 12 characters"> 

Also there is a minlength attribute for input tags but it does not work in some browsers:

<input type="password" minlength="8" required> 

Answer 2

You can use the pattern attribute:

<input pattern=".{8,}" type="password" name="pass" placeholder="Your Password" required /> 

Answer 3

Change your button to :

<button name="btn-login">Sign In</button>

And add this code JavaScript (using jquery) :

$('button[name="btn-login"]').click(function() {
    if($('input[name="pass"]').val().length < 8) {
        alert('Minimum length = 8');
    } else {
        $('form').submit();
    }
});

Dont forget to add this condition into your PHP code.

Answer 4

You could use minlength and maxlength

As usual, you can use the minlength and maxlength attributes to establish minimum and maximum acceptable lengths for the password. This example expands on the previous one by specifying that the user's PIN must be at least four and no more than eight digits. The size attribute is used to ensure that the password entry control is eight characters wide.

Source

But it works on Chrome only at the moment.

Or, as someone already mentioned, you could use pattern.

If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the pattern attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.

Source