Radio Button Validation Using jQuery

Radio Button Validation Using jQuery

byRAYS CODING -
0
"Hello, everyone! In this article,  I will explain to you the  'Radio Button Validation in jQuery'. Today, we'll explore how to check whether radio buttons are ticked or not within an HTML form.

Radio Button Validation Using jQuery

Step of Name Validation

  1. Create a Radio Button form
  2. Write the Radio Button validation code

Create a Radio Button 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="col-lg-6">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h5>Select Gender</h5>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-check">
                                                <input class="form-check-input gender" type="radio" name="user_gender"  value="Male" id="usergenderM">
                                                <label class="form-check-label">Male</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="user_gender" value="Female" id="usergenderF">
                                                <label class="form-check-label">Female</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="user_gender" value="other" id="usergenderO">
                                                <label class="form-check-label">Other</label>
                                            </div>
                                        </div>
                                        <span id="gender_error" class="gendererror"></span>
                                    </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 Radio Button 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 designed for validating radio buttons using jQuery. Like the previous examples, it utilizes Bootstrap for styling and includes a form for users to select their gender through radio buttons.

The structure of the webpage follows a similar pattern to the previous examples. It consists of a container for proper alignment and spacing, within which there's a card element acting as a container for the form. The card has a header with a blue background and a title indicating the purpose of the form, which is "Rays Coding: JQuery Form Validation".

Inside the card body, there's a form with radio button inputs for selecting gender. These radio buttons are grouped together by the "name" attribute, ensuring that only one option can be selected. Each radio button is labeled with its corresponding gender option: Male, Female, and Other.

Below the radio buttons, there's an empty span element with an ID of "gender_error", presumably meant to display any validation errors related to radio button selection.

At the bottom of the form, there's a submit button labeled "Submit" to initiate the validation process. Again, the form itself has no action attribute specified, meaning it doesn't submit the data anywhere upon submission.

Below the form, there's a separate section with the heading "jQuery Radio Button Validation", likely meant for providing additional information or instructions related to radio button validation using jQuery.

Finally, the webpage includes a script tag importing jQuery from a Content Delivery Network (CDN), specifically version 3.6.2. This jQuery script will likely be used to implement the radio button validation functionality, though the actual validation logic is not provided in this code snippet.

Write the Radio Button validation code

<script>
    $(document).ready(function () {
        $('#sub_button').on('click', function () {
            if ($(".gender:checked ").filter(":checked").length < 1) {
                $("#gender_error").text("Select any option");
                $("#gender_error").css("color", "red");
                $(".gender").focus();
                return false;
            }
        });
    });
</script>

Radio Button Validation Using jQuery

This JavaScript code provides validation functionality for radio buttons using jQuery. It begins by targeting the submit button with the ID "sub_button" and attaching a click event handler to it. When the button is clicked, the function defined inside $(document).ready() is executed.

Within this function, the script checks if any of the radio buttons with the class "gender" are checked. It does this by using jQuery to select all elements with the class "gender" that are checked, and then filtering them further to ensure at least one is checked. If none are checked, it indicates an error by setting the text of the element with the ID "gender_error" to "Select any option" and styling the text color as red for emphasis.

Additionally, if no radio button is checked, the script sets focus back to one of the radio buttons with the class "gender", ensuring the user's attention is drawn to the unselected options. Finally, the function returns false to prevent the form from being submitted if no radio button is checked.

Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement