CODEWITHSUNDEEP
javascripthtml
Mugunthan S
Mugunthan S

Reputation: 538

how to set maximum number character and minimum number of character for html input type

hi i am trying to set minimum number of character(eg:4) for password and also i set maximum number of character(eg:4) for password .

  <input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4">

the problem is minimum number character for password is not working . i am using maxlength for maximum character and minlength for minimum character . please help me to resolve problem

 <a class="label" style="width: 336px; height:33px;" >
                            <font color="white" size="5px">LOGIN (STEP 1)
                            </font></a><br/><br/><form id="myForm" action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
                            <input type="text" id="myText" placeholder="Username" name="username" style="width: 390px; height: 50px">
                            <br/><br/>
                            <input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4">

                            <br/><br/>


                                                                               <a href="forgotpassword"style="width: 48%; text-decoration:none;">  <font color="white" size="4px;">Forgot Password? Need Help!</font> </a>


                            <br/><br/>


                            <a class="button1"  onclick="myFunction()"  style="text-decoration:none;"><font color="white" size="5px">Next</font></a></form>


                    </div></div></div>

            <script>
                function myFunction() {
                    var username = document.forms["myForm"]["username"].value;
                    var password = document.forms["myForm"]["password"].value;
                    if (username == null || username == ""&&password == null || password == "") {
                        alert("complete all fields");
                        return false;
                    }else{
                        document.getElementById("myForm").submit().value="submit";
                    }
                }
            </script>

Upvotes: 1

Views: 1553

Answers (2)

KooiInc
KooiInc

Reputation: 123016

You can use a bit of css and a keyup handler. Say your input resides within div#pwdrow. Give that div a data-attribute, style it like this

#pwdrow:after {
    content: attr(data-lenchk);
    color:red;
    font-weight: bold;
}

and use this keyup handler:

function checklen(e){
    var valLen = this.value.length;
    d.querySelector('#pwdrow')
      .setAttribute( 'data-lenchk', 
                      valLen < 4 ? 'too short (min 4)'
                      : valLen > 6 ? 'too long (max 6)' : '' );
}

Here's a jsFiddle you can play with

Upvotes: 2

practice2perfect
practice2perfect

Reputation: 507

minlength attribute is not supported by most of the browsers as of now.

instead you can try the below 

<input type="password" pattern=".{4,}" required> //min chars - 4
<input type="password" pattern=".{4,8}" required> //min chars -  4 max chars - 8

or you can use jquery or dojo widjets that has minlength attributes built in

Upvotes: 1

Related Questions