Control Validation using jQuery

Validation is key important point for any application. In Website we need to validate control or inputs immediately after user enters values in controls.

This can be achieved by below code.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
           
        });

        function ValidateEmail() {
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
           
		   var emailaddress = $("#Email").val();
			
            if (!emailaddress) {
                $("#emailspan").html('<font color="#cc0000">Please enter Email </font>');
                return false;
            } else {
			 $("#emailspan").html('<font color="#cc0000"></font>');
                return true;
            }

            if (!emailReg.test(emailaddress)) {
                $("#emailspan").html('<font color="#cc0000">Please enter valid Email address</font>');
                return false;
            } else {
                $("#emailspan").html('<font color="#cc0000"></font>');
                return true;
            }
        }

        function checkPassowrd() {
            var password = $("#pwd").val();
            if (!password) {
                $("#passwordspan").html('<font color="#cc0000">Please enter Password</font>');
                return false;
            } else {
				$("#passwordspan").html('<font color="#cc0000"></font>');
                return true;
            }
        }

        function validateform() {
            var result = false;
			var res = ValidateEmail();
			var res1 = checkPassowrd();
			
            if (res == true && res1 == true) {
                result = true;
            }
            return result;
        }
    </script>
</head>

<body>
    <div class="container">
        <h2>Validation</h2>
        <form>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="text" id="Email" class="form-control" name="Email" maxLength="50" size="45" onblur="ValidateEmail()" /><span id="emailspan" value="0"></span>

            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" onblur="checkPassowrd()"><span id="passwordspan" value="0"></span>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="remember"> Remember Me</label>
            </div>
            <button type="submit" class="btn btn-default" onclick="return validateform()">Submit</button>
        </form>
    </div>
</body>
</html>

Above Code will display page as below

When User click on Submit button it will show error message as below.

When I enter email value it will remove error message as shown in below Image

Note that we require jQuery  for this validation.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s