Password Validation In jQuery

Password Validation In jQuery

byRAYS CODING -
0
Today, I am starting the form "Password Validation In jQuery". This is the first article on form validation, in this article, I will tell you about "Password Validation In jQuery".

Password Validation In jQuery

Step of Name Validation

  1. Create an HTML form
  2. Write the validation code

Create an HTML form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rays Coding-JQuery Validation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-5 form_box">
        <div class="row">
            <div class="card p-0">
                <div class="card-header bg-primary">
                    <h3 class="text-center text-white">Rays Coding :- JQuery Form Validation(Password)</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="#" method="post" enctype="multipart/form-data" id="form_data">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label for="userpassword">Password</label>
                                            <input type="password" name="user_password" class="form-control"  id="userpassword" placeholder="Enter Your Password" autocomplete="off">
                                            <span id="password_error" class="passworderror"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <button type="submit" class="btn btn-primary mt-4" name="sub_btn" id="sub_button">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 validationtext">
                <h1>jQuery Password Validation</h1>
            </div>
        </div>
    </div>
    <!-- jquery  CDN -->
    <script src="https://code.jquery.com/jquery-3.6.2.slim.min.js" integrity="sha256-E3P3OaTZH+HlEM7f1gdAT3lHAn4nWBZXuYe89DFg2d0=" crossorigin="anonymous"></script>
</body>
</html>

This HTML code presents a webpage aimed at performing form validation using jQuery, specifically focusing on password input validation. The structure of the webpage is established using HTML elements with Bootstrap CSS classes for styling.

The main content resides within a container with the class "container". Inside it, a card layout is implemented using Bootstrap classes, featuring a header and a body section.

The header of the card displays the title "Rays Coding:- JQuery Form Validation(Password)" in a visually prominent manner, indicating the purpose of the form validation, which is to handle password input.

Moving to the body section, there's a form element configured to handle data submission with the ID "form_data". Within the form, there's a  with the class "mb-3" containing the label "Password" and an input field of type "password" with the name "user_password" and the ID "userpassword". This input field allows users to enter their password and includes a placeholder for guidance. Additionally, there's an empty element with the ID "password_error" placed below the input field. This span will be used to display error messages related to password validation.

Below the form, there's a submit button styled using Bootstrap classes, enabling users to submit the form.

Further down the webpage, outside the card container, there's a separate section with the heading "jQuery Password Validation". This section seems to provide additional context or instructions related to the password validation process.

Lastly, the page includes a script tag importing jQuery from a content delivery network (CDN). This jQuery script will likely be used to implement the password validation logic, although the validation script itself is not provided in the given code snippet.

Password Validation In jQuery

Write the validation code

<script>
    $(document).ready(function () {
        $('#sub_button').on('click', function (e) {
            e.preventDefault();
            var field_val = $('#userpassword').val();
            let uppercase = /[A-Z]/g;
            let lowercase = /[a-z]/g;
            let digit = /[0-9]/g;
            let special_car = /[!@#$%^&*()_]/g;
            if (field_val == '') {
                console.log(field_val);
                $('#password_error').text('Password is requried');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else if (!field_val.match(uppercase)) {
                console.log(field_val);
                $('#password_error').text('Please enter at least one capital letter.');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else if (!field_val.match(lowercase)) {
                console.log(field_val);
                $('#password_error').text('Please enter at least one small letter.');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else if (!field_val.match(digit)) {
                console.log(field_val);
                $('#password_error').text('Please enter at least one digit.');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else if (!field_val.match(special_car)) {
                console.log(field_val);
                $('#password_error').text('Please enter at least one special character.');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else if (field_val.length < 8) {
                console.log(field_val);
                $('#password_error').text('Please enter minimum eight character.');
                $('#password_error').css('color', 'crimson');
                $('#userpassword').focus();
                return false;
            }
            else {
                console.log(field_val);
                console.log('complete');
                $('#password_error').text('');
                $('#form_data').trigger('reset');
            }
        });
    });
</script>

Password Validation In jQuery

This JavaScript code is designed to handle password validation for a form using jQuery. It is triggered when the submit button with the ID "sub_button" is clicked and executes within the $(document).ready() function, ensuring all DOM elements are loaded before execution.

First, it prevents the default form submission behavior using e.preventDefault(), ensuring that the validation process runs before form submission.

Then, it retrieves the value of the password input field with the ID "userpassword" using jQuery's .val() method and stores it in the variable field_val.

Password Validation In jQuery

Following that, it defines regular expressions to check for specific criteria in the password: uppercase letters, lowercase letters, digits, and special characters. Each regular expression is stored in a separate variable (uppercase, lowercase, digit, special_car).

The script then proceeds with a series of conditional statements to check various password requirements:
  1. If the password field is empty, it displays an error message indicating that the password is required.
  2. If the password does not contain at least one uppercase letter, it prompts the user to include one.
  3. If the password does not contain at least one lowercase letter, it prompts the user to include one.
  4. If the password does not contain at least one digit, it prompts the user to include one.
  5. If the password does not contain at least one special character, it prompts the user to include one.
  6. If the password length is less than 8 characters, it prompts the user to use a longer password.
  7. For each validation condition that fails, an error message is displayed, the text color is set to crimson (a shade of red), and the focus is returned to the password input field to facilitate correction.
If all validation conditions pass, indicating a valid password, the error message is cleared, and the form is reset using $('#form_data').trigger('reset').
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement