Javascript Validation Part 4 (Checking-length-restriction)

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>JavaScript form validation - checking-length-restriction</title>

    <link rel='stylesheet' href='form-style.css' type='text/css' />

    <style type="text/css">

        li

        {

            list-style-type: none;

            font-size: 16pt;

        }

        .mail

        {

            margin: auto;

            padding-top: 10px;

            padding-bottom: 10px;

            width: 400px;

            background: #D8F1F8;

            border: 1px soild silver;

        }

        .mail h2

        {

            margin-left: 38px;

        }

        input

        {

            font-size: 20pt;

        }

        input:focus, textarea:focus

        {

            background-color: lightyellow;

        }

        input submit

        {

            font-size: 12pt;

        }

        .rq

        {

            color: #FF0000;

            font-size: 10pt;

        }

    </style>

</head>

<body onload='document.form1.text1.focus()'>

    <div class="mail">

        <p>

            Enter Userid [between 6 to 8 characters] and Submit</p>

        <form name="form1" action="#">

        <ul>

            <li>Username:<input type='text' name='text1' /></li>

            <li>&nbsp;</li>

            <li class="submit">

                <input type="submit" name="submit" value="Submit" onclick="stringlength(document.form1.text1,6,8)" />

            </li>

            <li>&nbsp;</li>

        </ul>

        </form>

    </div>

    <script type="text/javascript">

        function stringlength(inputtxt, minlength, maxlength) {

            var field = inputtxt.value;

            var mnlen = minlength;

            var mxlen = maxlength;

            if (field.length < mnlen || field.length > mxlen) {

                alert("Please input the userid between " + mnlen + " and " + mxlen + " characters");

                return false;

            }

            else {

                alert('Your userid have accepted.');

                return true;

            }

        }

    </script>

</body>

</html>