I was building a HTML form where a group of text inputs wasn't required by default.
However, if any of the inputs in the group was filled, all the inputs in the group had to be.
I was already using jQuery on the page, so this is how I solved it.
How to make a group of HTML text inputs required if one input is filled
- Add the same, unique class to all the inputs in the group
- Using jQuery, listen for any member of the class being changed
- Check if any of the members of the class have any value entered
- If any have a value, set all the inputs to required
- If none have a value, clear the required from all the inputs
The jQuery code in full is:
jQuery(function ($) {
/* If any review or rating field is filled, all must be */
const rating_group = ".rating-group";
$(rating_group).change(function () {
let rating_filled = "no";
$(rating_group).each(function () {
if ($(this).val() !== "") {
rating_filled = "yes";
return false;
}
});
if (rating_filled === "yes") {
$(rating_group).each(function () {
$(this).attr("required", true);
});
}
if (rating_filled === "no") {
$(rating_group).each(function () {
$(this).attr("required", false);
});
}
});
});Make sure you're calling jQuery in the code somewhere above this code. If you don't, the code won't work and you will likely see some errors in your console about jQuery not being defined.
Let's break the code down.
Add the same, unique class to all the inputs in the group
Let's assume the HTML in my form looked something like this:
<input type="text" id="first" name="first" class="rating-group" />
<input type="text" id="second" name="second" class="rating-group" />
<input type="text" id="third" name="third" class="rating-group" />The class I applied to all the inputs in the group was "rating-group".
If you want to use this in your code, just make sure to change ".rating-group" to the class you use on your group of inputs and add that class to your inputs.
I also had a <textarea> in the group, so this method works for that type too. I haven't tested it with select or radio, so you may need to change things if you're doing those.
In case you're new to jQuery, the first and last lines are just the wrapper to tell the browser to use jQuery instead of vanilla JavaScript.
jQuery(function ($) {
});If you are already using jQuery on the page, you don't need to add these lines again. You can just put the rest of the code inside the wrapper you already have.
Listen for any member of the group being changed
To make the code a bit more robust, it's good to take the extra step to define the selector up front. You'll need it a few times, and this cuts down on potential spelling errors.
const rating_group = ".rating-group";
$(rating_group).change(function () {
});This is the same as doing:
$(".rating-group").change(function () { });You could swap change for keyup if you wanted to listen to every keypress, but that's overkill for what we need.
The code won't run immediately the input is changed. It will run when the user moves to the next field or clicks / tabs out of the field.
Check if any of the members of the class have any value entered
let rating_filled = "no";
$(rating_group).each(function () {
if ($(this).val() !== "") {
rating_filled = "yes";
return false;
}
});With rating_filled, we're setting a variable to default to "no" to use later in checking whether any of the inputs have values entered.
We then run through each of the inputs with the "rating-group" class and checking if they have a non-blank value.
If any of the inputs have a non-blank value, we change rating_filled to "yes" and stop checking any more inputs.
The return false; inside of a jQuery each works the same as break does in a PHP for or foreach loop.
If any have a value, set all the inputs to required
if (rating_filled === "yes") {
$(rating_group).each(function () {
$(this).attr("required", true);
});
}This is where we use the rating_filled value from before.
If it's yes, we run through each of the inputs and set them all to be required.
This will run even if the inputs are all already set to required.
If none have a value, clear required from the inputs
if (rating_filled === "no") {
$(rating_group).each(function () {
$(this).attr("required", false);
});
}If none of the members of the group had a value, the checking code above would have run through without changing the default value of rating_filled from "no".
By doing this step, if the user deletes the text in all the inputs in the group, they can go back to the initial state, where the inputs are no longer required.
If you've implemented this code correctly, the form will submit if all of the designated inputs are empty.
But if any of the designated inputs have a value in them, the user will not be able to submit the form until all of the designated inputs have values in them.
