Add and remove required attribute based on whether it is visible or hidden

Question

I have looked at this post Add required attribute when fields are visible however I'm not using a yes/no check.

I'm wanting to remove the required attribute in a form when a class called '.required-item' isn't visible. And the opposite of that; when the class is visible it needs to be required.

This is the code I've written so far, however after going around in circles for a few hours I thought I'd bring it here to see if anyone can help.

Not sure if this is relative, but the form fields that have the .required-item class on it are either an input field or an email field. And it's ideal if I use a class for this as there are numerous of these hidden fields.

$(document).ready(function() {
    if ($('.required-item').is(':visible')) {
      $('.required-item').attr('required', 'required');
    } else {
      $('.required-item').removeAttr('required');
    }
});

Here is the JS Fiddle
Thank you in advance.

I think you need to rethink this. If there is no element with this class `required-item`, how can you remove the attribute from elements with that class? — Carsten Løvbo Andersen, May 10 '22 at 05:44
@CarstenLøvboAndersen I think you have misunderstood me - there are many elements with this class. — Liv Strawbridge, May 10 '22 at 05:52
@CarstenLøvboAndersen I've built a version on it in JS Fiddle for you, let me know what you think? https://jsfiddle.net/0zapwfq4/ — Liv Strawbridge, May 11 '22 at 21:26

score 0 · Answer 1 · answered May 10 '22 at 10:09

0

$(document).ready(function() {
    if ($('.required-item').is(':visible')) {
      $('.required-item').prop('required',true);

    } else {
      $('.required-item').prop('required',false);
    }
});

answered May 10 '22 at 10:09

Shravan Goswami

42
1
4

I tried this on the [JS Fiddle](https://jsfiddle.net/0zapwfq4/) but it didn't work. – Liv Strawbridge May 11 '22 at 23:05

score 0 · Accepted Answer · answered May 12 '22 at 05:42

I believe this is what you want.

$('#Additional-Attendees').on('change', function() {
  var v = $(this).val() == "No" ? 0 : +$(this).val();

  var after = $(".additional-attendees:eq(" + v + ")").nextAll(".additional-attendees").addBack();
  var before = $(".additional-attendees:eq(" + v + ")").prevAll(".additional-attendees")
  $.each(before, function() {
    $(this).show();
    $('input[id*="First-Name"]',this).prop("required", true)
    $('input[id*="Last-Name"]',this).prop("required", true)
    $('input[id*="Email"]',this).prop("required", true)
  });
  $.each(after, function() {
    $(this).hide();
    $('input[id*="First-Name"]',this).prop("required", false).val("")
    $('input[id*="Last-Name"]',this).prop("required", false).val("")
    $('input[id*="Email"]',this).prop("required", false).val("")
    $('input[type="checkbox"]:checked',this).prop('checked', false).trigger('change');
  });
});

Demo

As you can see I have shorten down the code a bit, so it's more dynamic.

$('.required-item').prop('required', function() {
  return $(this).is(':visible');
});
$('#Additional-Attendees').on('change', function() {
  var v = $(this).val() == "No" ? 0 : +$(this).val();

  var after = $(".additional-attendees:eq(" + v + ")").nextAll(".additional-attendees").addBack();
  var before = $(".additional-attendees:eq(" + v + ")").prevAll(".additional-attendees")
  $.each(before, function() {
    $(this).show();
    $('input[id*="First-Name"]',this).prop("required", true)
    $('input[id*="Last-Name"]',this).prop("required", true)
    $('input[id*="Email"]',this).prop("required", true)
  });
  $.each(after, function() {
    $(this).hide();
    $('input[id*="First-Name"]',this).prop("required", false).val("")
    $('input[id*="Last-Name"]',this).prop("required", false).val("")
    $('input[id*="Email"]',this).prop("required", false).val("")
    $('input[type="checkbox"]:checked',this).prop('checked', false).trigger('change');
  });
});

.additional-attendees {
  padding-top: 20px;
}

.button {
  margin-top: 20px;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <h2>Form</h2>

  <form redirect="/retreat/registration-confirmation">

    <input type="text" name="First-Name" placeholder="First Name*" id="First-Name" required="">
    <input type="text" name="Last-Name" placeholder="Last Name*" id="Last-Name" required="">
    <input type="email" name="Email" data-name="Email" placeholder="Email*" id="Email" required="">
    <div style="margin-top:20px;">
      Additional Attendees?
      <div>
        <select id="Additional-Attendees" name="Additional-Attendees" required="">
          <option value="No">No</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
      <div class="additional-attendees a1" style="display: none;">
        <div>Attendee 1 Info:</div>
        <input type="text" name="A1-First-Name" placeholder="First Name*" id="A1-First-Name" required="" class="required-item">
        <input type="text" name="A1-Last-Name" placeholder="Last Name*" id="A1-Last-Name" required="" class="required-item">
        <input type="email" name="A1-Email" data-name="Email" placeholder="Email*" id="A1-Email" required="" class="required-item">
        <label><input type="checkbox" name="A1-Vegetarian" id="A1-Vegetarian" data-name="A1 Vegetarian" class="check"><span class="check-label" for="A1-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a2" style="display: none;">
        <div>Attendee 2 Info:</div>
        <input type="text" name="A2-First-Name" placeholder="First Name*" id="A2-First-Name" required="" class="required-item">
        <input type="text" name="A2-Last-Name" placeholder="Last Name*" id="A2-Last-Name" required="" class="required-item">
        <input type="email" name="A2-Email" data-name="Email" placeholder="Email*" id="A2-Email" required="" class="required-item">
        <label><input type="checkbox" name="A2-Vegetarian" id="A2-Vegetarian" data-name="A2 Vegetarian" class="check"><span class="check-label" for="A2-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a3" style="display: none;">
        <div>Attendee 3 Info:</div>
        <input type="text" name="A3-First-Name" placeholder="First Name*" id="A3-First-Name" required="" class="required-item">
        <input type="text" name="A3-Last-Name" placeholder="Last Name*" id="A3-Last-Name" required="" class="required-item">
        <input type="email" name="A3-Email" data-name="Email" placeholder="Email*" id="A3-Email" required="" class="required-item">
        <label><input type="checkbox" name="A3-Vegetarian" id="A3-Vegetarian" data-name="A3 Vegetarian" class="check"><span class="check-label" for="A3-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a4" style="display: none;">
        <div>Attendee 4 Info:</div>
        <input type="text" name="A4-First-Name" placeholder="First Name*" id="A4-First-Name" required="" class="required-item">
        <input type="text" name="A4-Last-Name" placeholder="Last Name*" id="A4-Last-Name" required="" class="required-item">
        <input type="email" name="A4-Email" data-name="Email" placeholder="Email*" id="A4-Email" required="" class="required-item">
        <label><input type="checkbox" name="A4-Vegetarian" id="A4-Vegetarian" data-name="A4 Vegetarian" class="check"><span class="check-label" for="A4-Vegetarian">Vegetarian</span></label>
      </div>

      <div class="additional-attendees a5" style="display: none;">
        <div>Attendee 5 Info:</div>
        <input type="text" name="A5-First-Name" placeholder="First Name*" id="A5-First-Name" required="" class="required-item">
        <input type="text" name="A5-Last-Name" placeholder="Last Name*" id="A5-Last-Name" required="" class="required-item">
        <input type="email" name="A5-Email" data-name="Email" placeholder="Email*" id="A5-Email" required="" class="required-item">
        <label><input type="checkbox" name="A5-Vegetarian" id="A5-Vegetarian" data-name="A5 Vegetarian" class="check"><span class="check-label" for="A5-Vegetarian">Vegetarian</span></label>
      </div>
      <div>
        <input type="submit" value="Submit" class="button">
      </div>
    </div>

  </form>
</body>

</html>

Add and remove required attribute based on whether it is visible or hidden

2 Answers2