jQuery Select Box Validation

jQuery Select Box Validation

byRAYS CODING -
0
This is the fifth article of the "jQuery validation". In this article, I will inform you about the process of "Select Box Validation In Jquery". 

jQuery Select Box Validation

Step of Name Validation

  1. Create a Select Box form
  2. Write the validation code

Create a Select Box 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(Select Box)</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 check_id">
                                    <div class="col-lg-6">
                                        <select name="usercountry" id="user_country" class="form-select">
                                            <option value="">Select Your Country</option>
                                            <option value="america">America</option>
                                            <option value="australia">Australia</option>
                                            <option value="bangladesh">Bangladesh</option>
                                            <option value="canada">Canada</option>
                                            <option value="denmark">Denmark</option>
                                            <option value="Eeypt">Egypt</option>
                                        </select>
                                    </div>
                                    <span id="usercountry_error" class="usercountryerror"></span>
                                </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 Select Box 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 represents a webpage for form validation using jQuery, with a focus on validating a select box (dropdown menu). The webpage begins with a standard HTML structure, including meta tags for the character set and viewport settings, along with links to external CSS and JavaScript libraries for styling and functionality.

The main content of the webpage is contained within an <div> element with the class "container". Inside this container, there is a card layout created using Bootstrap CSS classes. The card consists of a header and a body section.

In the header, there's a title displayed prominently, indicating the purpose of the form: "Rays Coding:- JQuery Form Validation(Select Box)". This suggests that the form is intended for validating user input, specifically targeting a select box.

Moving to the body section of the card, there's a form element enclosed within it. The form contains a dropdown select box (<select>) with options for various countries. Users are prompted to select their country from the list. Additionally, there's an empty <span> element with the ID "usercountry_error" placed right after the select box. This span will be used to display error messages related to the select box validation.

Below the select box, there's a submit button styled with Bootstrap classes, allowing users to submit the form.

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

Lastly, the page includes a script tag importing jQuery from a content delivery network (CDN). This jQuery script will be used to implement the form validation logic, specifically targeting the select box element.

Overall, this HTML code sets up a webpage for a form validation task focused on validating user input from a select box, utilizing jQuery for client-side scripting and Bootstrap for styling.

Write the validation code

<script>
    $(document).ready(function () {
        $('#sub_button').on('click', function () {
            // get the value of select box
            var field_value = $('#user_country').val();
            if (field_value == '') {
                $('.usercountryerror').text('Please Select Your Country');
                $('.usercountryerror').css('color', 'red');
                $('#user_country').focus();
                return false;
            }
        });
    });
</script>


jQuery Select Box Validation

This JavaScript code is designed to handle form validation using jQuery. It targets the submit button with the ID "sub_button" and listens for a click event. When the button is clicked, the function is defined within the $(document).ready() block is executed.

Inside this function, it retrieves the value of the select box with the ID "user_country" using jQuery's .val() method and stores it in the variable field_value.

It then checks if the value of the select box is empty (''). If it is, it means the user hasn't selected any country from the dropdown. In this case, it displays an error message by setting the text of an element with the class "usercountryerror" to "Please Select Your Country" and changing its color to red using jQuery's .text() and .css() methods respectively. Additionally, it sets focus back to the select box to prompt the user to make a selection.

Finally, it returns false to prevent the form from being submitted if the validation fails. This effectively stops the form submission process until a valid selection is made.

In summary, this script ensures that users cannot submit the form without selecting a country from the dropdown menu and provides immediate feedback in case of an omission.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement