Name Validation Using jQuery

Name Validation Using jQuery

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

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</h3>
            </div>
            <div class="card-body">
               <div class="row">
                  <div class="col-lg-12">
                     <form action="#" method="post" enctype="multipart/form-data">
                        <div class="row">
                           <div class="col-lg-12">
                              <div class="mb-3">
                                 <input type="text" name="user_name" class="form-control" id="username" placeholder="Enter Your Name" autocomplete="off">
                                 <span id="name_error" class="nameerror"></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 class="container">
         <div class="row">
            <div class="col-lg-12 validationtext">
               <h1>jQuery Name 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>

The document type declaration <!DOCTYPE html> specifies the version of HTML being used, ensuring that web browsers interpret the page correctly. The HTML structure includes essential elements like the language declaration <html lang="en"> for English, the <head> section containing metadata such as character encoding and viewport settings, and a <title> tag defining the webpage's title.

Within the <body>, content is organized using <div> elements with specific classes for styling purposes. The main content resides within a container styled as a card, which includes a form for inputting a user's name and a submit button. Additionally, there's a provision for displaying validation error messages through an empty <span> element.

The script section loads the jQuery library from a content delivery network, enabling dynamic functionality like form validation without needing to write extensive JavaScript code. Overall, this structure sets up a webpage with a user-friendly form interface and validation capabilities.

Write the validation code

<script>
    $(document).ready(function () {
        $('#sub_button').on('click', function () {
            let store_name_value = $('#username').val();
            let name_regexp = /^[a-zA-z]{3,50}$/;
            if (store_name_value == '') {
                $('#name_error').text("Please Enter Your Name");
                $('#name_error').css('color', '#e74c3c');
                $('#username').focus();
                return false;
            }
            if (store_name_value.length < 3) {
                $('#name_error').text("Please Enter Correct Name");
                $('#name_error').css('color', '#ed4c67');
                $('#username').focus();
                return false;
            }
            if (!store_name_value.match(name_regexp)) {
                $('#name_error').text("Please Enter Correct Name");
                $('#name_error').css('color', '#co392b');
                $('#username').focus();
                return false;
            }
        });
    });
</script>

This JavaScript code is designed to run when the document is fully loaded. It waits for a click event on an element with the ID 'sub_button'. When this button is clicked, it performs a series of checks on the value entered into an input field with the ID 'username'.

First, it retrieves the value entered into the 'username' field and stores it in the variable 'store_name_value'. Then, it defines a regular expression named 'name_regexp' that checks if the entered value consists of alphabetic characters only and is between 3 and 50 characters in length.

Next, it checks if the 'store_name_value' is an empty string. If it is, it displays an error message asking the user to enter their name, changes the text color to red, focuses on the 'username' input field, and prevents further execution by returning false.

If the length of 'store_name_value' is less than 3 characters, it displays an error message asking the user to enter a correct name, changes the text color to a different shade of red, focuses on the 'username' input field, and again prevents further execution by returning false.

Lastly, it checks if the entered value matches the regular expression 'name_regexp'. If it doesn't match, it displays the same error message asking for a correct name, changes the text color to a different shade of red, focuses on the 'username' input field, and prevents further execution by returning false.


Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement