When the checkbox is checked, remove the class from the labels

I wrote a basic form validation script and now I am trying to reset the errors that occur if the user has not filled in the required field.

For checkboxes and radio buttons, I added a class error

to my labels. The HTML code for this looks like this:

<input class="required" id="Example31" name="Example3" type="checkbox" />
<label for="Example31" class="error">Example Input 3 Option 1</label>

<input class="required" id="Example32" name="Example3" type="checkbox" />
<label for="Example32" class="error">Example Input 3 Option 2</label>

<input class="required" id="Example4" name="Example4" type="radio" />
<label for="Example4" class="error">Example Input 4</label>

      

To add errors, I'll figure out if any checkbox with the same name is checked using this script:

$("input.required").each(function() {
    // check checkboxes and radio buttons
        if ($(this).is(":checkbox") || $(this).is(":radio")) {
            var inputName = $(this).attr("name");
            if (!$("input[name=" + inputName + "]").is(":checked")) {
                var inputId = $(this).attr("id");
                $("label[for=" + inputId + "]").addClass("error");
                error = true;
            };
        };
    // end checkboxes and radio buttons
});

      

How to remove errors without changing HTML? I am drawing a complete blank. That's what I think:

  • Provide a name associated with each misspelled label
  • Find a checkbox or radio button that has this ID
  • Show checkbox or radio button name
  • Find other checkboxes or radio buttons with the same name
  • Find those ID inputs
  • Find tags with these names
  • Remove errors from these labels

I am lost t. If anyone can help it would be very helpful.

+3


source to share


2 answers


I was able to solve this problem myself:



$("input.required").each(function() {
    if ($(this).is(":checkbox") || $(this).is(":radio")) {
        var inputName = $(this).attr("name");
        var labelFor = $(this).attr("id");
        $(this).click(function() {
            $("input[name=" + inputName + "]").each(function() {
                var labelFor = $(this).attr("id");
                $("label[for=" + labelFor + "]").removeClass("error");
            });
        });
    };
});

      

0


source


I turned your "thinking" into code. See if this works for you ...



// Figure out the name associated with each label that has an error
$(".error").each(function() {
    var m = $(this).attr('for');

    // Find the checkbox or radio button that has that ID
    $("input[id=" + m + "]").each(function() {

        // Figure out the checkbox or radio buttons name
        var n = $(this).attr('name');

        // Find the rest of the checkboxes or radio buttons with the same name
        $("input[name=" + n + "]").not(this).each(function() {

            // Find those inputs IDs
            i = $(this).attr('id');

            // Find labels with those names
            $("label[for=" + i + "]").each() {

                // Clear the errors off of those labels
                $(this).removeClass("error");
            });
        });
    });
});

      

0


source







All Articles