Function to Compare text of Password and Confirm Password field and placing it in document.ready function

Solution

<script>        
$(document).ready(function () {
$('#Password, #CPassword').on('change', function () {
            var ps = $("#Password").val();
            var cps = $("#CPassword").val();
            if (ps != null && ps != '' && cps != null && cps != '') {
                if (ps != cps) {
                    alert("Please Enter the same Password in both fields");

                    $('#Password').css('border-color', 'red');
                    $('#CPassword').css('border-color', 'red');
                } else {
                    //           
                    $('#Password').css('border-color', 'green');
                    $('#CPassword').css('border-color', 'green');

                }
            }
        });
});
</script>

Explanation

Within document.ready function, a function is created that:

Take ids of the Password and Confirm Password fields so the values may be compared and when the values are changed, the texts of both fields are compared.
If both the fields contain same passwords, it sets its border green
Otherwise, It alerts the user to enter the same password in both fields and sets the border red.

Leave a comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a free website or blog at WordPress.com.

Design a site like this with WordPress.com