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 to share
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 to share