Password and Confirm Password validation using jQuery

,

The following HTML Markup consists of two HTML Password TextBoxes and a Button. The Button has been assigned a jQuery OnClick event handler.



When the Button is clicked, the values of the Password and the Confirm Password TextBoxes are fetched and are compared. If the values do not match an error message is displayed using JavaScript Alert Message Box and False value is returned in order to stop the form submission.

Html

<label>Password:</label>
<input type="password" id="txtPassword" />
<label>Confirm Password:</label>
<input type="password" id="txtConfirmPassword" />
<input type="button" id="btnSubmit" value="Submit" />

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {
            var password = $("#txtPassword").val();
            var confirmPassword = $("#txtConfirmPassword").val();
            if (password != confirmPassword) {
                alert("Passwords do not match.");
                return false;
            }
            return true;
        });
    });
</script>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.