javascript based entry checks with messages

In the following example, we perform data entry checks and highlight the input fields whose values are not provided or not provided in proper format

<!DOCTYPE html>
<html>
<head>
    <title>Untitled document</title>
  <meta charset="utf-8" />

    <style>
        .normal
        {
            background-color:white;
        }

        .error
        {
            background-color:orangered;
        }
    </style>

    <script language="javascript" type="text/javascript">
        function validate()
        {
            var name = document.getElementById("txtname");
            var passwd = document.getElementById("txtpasswd");
            var cpasswd = document.getElementById("txtcpasswd");

            var message = "<ul>";
            var status;

            if (name.value.length == 0)
            {
                message = message + "<li>Name cannot be blank</li>";
                name.className = "error";
                status = false;
            }
            else
            {
                name.className = "normal";

                if (name.value.length < 3 || name.value.length > 8) {
                    message = message + "<li>Name must be in range</li>";
                    name.className = "error";
                    status = false;
                }
                else
                {
                    name.className = "normal";
                }

            }

            

            if (passwd.value.length == 0) {
                message = message + "<li>password must be entered</li>";
                status = false;
                passwd.className = "error";
            }
            else
            {
                passwd.className = "normal";

                if (passwd.value != cpasswd.value) {
                    message = message + "<li>passwords must match</li>";
                    status = false;
                    passwd.className = "error";
                }
                else
                {
                    passwd.className = "normal";
                }
            }

            

            if (status == false)
            {
                message = message + "</ul>";
               document.getElementById("errmsg").innerHTML = message;
                return false;
            }
            else
               return true;
        }
    
    </script>
</head>
<body>
<form id="frm" name="frm" method="post" action=""
      onsubmit="return validate();">
    <table>
        <tr>
            <td>Name</td><td><input id="txtname" 
                name="txtname" type="text" maxlength="10" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input id="txtpasswd"
       name="txtpasswd" type="password" /></td>
        </tr>
        <tr>
            <td>Confirm Password</td>
            <td><input id="txtcpasswd"
       name="txtcpasswd" type="password" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="btnsubmit" name="btnsubmit"
              type="submit" value="Submit" /></td>
        </tr>

        <tr>
            <td></td>
            <td>
               <span class="error" id="errmsg"></span>
            </td>
        </tr>

    </table>
</form>

</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *