Adding the 'required' attribute to all input fields which are 'shown' and with a specific class

user_1430420 0
Viewed 369

I have a web form which shows/hides secondary input fields based upon various radio buttons and checkboxes. This show/hide is done using JQuery triggered by a $(".id").on('change', function(){ which them hides all optional fields and show specific ones:

$(".optionalInfo").hide();
        $('#releaseRelated').prop('checked', false);  // Uncheck the 'Is this Release Related' box.
        $('input[name="repIdAvail"]').prop('checked', false); //Uncheck all the 'Is the Report ID available' boxes.
        $('.newRepData').show(); // show the new report DIV

etc.

I could add a $(".newReportInput").prop('required',true); for every field, but was wondering if I could add a single line at the end of the function to make all fields with a class of #optionalInfo and an attribute of 'show' as 'required'?

I found this JQuery to change all fields matching 2 attributes : input[id][name$='man']" ).val( "only this one" ); except I want to make all input fields required if they are in a dvi with a class of .optionalInfo and the div has the 'Show' attribute'

New to JQuery, so maybe this is just a bad thing to do.

Edit:

Small web page showing what I want to do:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Request</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<form target="_blank">
<!-- Radio buttons for request type. Subsequent input fields will appear depending upon the request type -->            
<input type="radio" required name="type" id="ADD" class="reqType">
<label class="form-check-label" for="ADD">Add new report</label>

<input type="radio" name="type" id="DELETE" class="reqType">
<label class="form-check-label" for="DELETE">Delete report</label>

<!-- 'Add report' fields -->
<div class="optionalInfo newRepData">
    <label for="reportId">New Report ID :</label>
    <input type="text" name="reportId" id="reportId">

    <label for="reportName">New Report Name :</label>
    <input type="text" name="reportName" id="reportName">
</div>

<br><br><input type="submit" value="Submit Request">
     
</form>


<script>

// Hide all optional fields when the page is loaded
    $(document).ready(function() {
        $(".optionalInfo").hide();
    });

// Hide all optional fields when a request type is chosen and then reveal the relevant fields
    $(".reqType").on('change', function(){
        
        // hide all of the optional inputs
        $(".optionalInfo").hide();

        // Show/hide optional fields depending upon the request chosen
        switch ($(this).attr('id')) {
            case "ADD":
                $('.newRepData').show();
                break;
            case "DELETE":
                break;
        }

    });
    
</script>
</body>
</html>

When the 'Add' option is chosen, I'd like the 2 fields that switch from 'hide' to 'show' to gain the 'required' tag.

Note - this is just a simple example, as my form is much longer. I had to rollback the edits which added the executable code snippet as these edits changed the nature of the question.

the underlying question is: How to make all visible input fields in a form 'required' after some JS code that hides/shows various input fields.

html jquery
2 Answers

if I have understood, i set required on input of section shown:

to all div hidden i put off required

  $('div.optionalInfo:hidden').find('input').prop("required", false");

to all div visible i set required

  $('div.optionalInfo:visible').find('input').prop("required", true");

you could adapt the syntax, for example selector input :

  $('div.optionalInfo input:visible').prop("required", true");
user_73807790

you can use this: on click add show newrepdata and add required attribute to inputs, on click delete hide newrepdata and remove required attribute from inputs:

// Hide all optional fields when the page is loaded
$(document).ready(function() {
  $(".optionalInfo").hide();
});

// Hide all optional fields when a request type is chosen and then reveal the relevant fields
$(".reqType").on('change', function() {

  // hide all of the optional inputs
  $(".optionalInfo").hide().children("input").removeAttr("required");

  // Show/hide optional fields depending upon the request chosen
  switch ($(this).attr('id')) {
    case "ADD":
      $('.newRepData').show().children("input").attr("required","");
      break;
    case "DELETE":
      break;
  }

});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Request</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <form target="_blank">
    <!-- Radio buttons for request type. Subsequent input fields will appear depending upon the request type -->
    <input type="radio" required name="type" id="ADD" class="reqType">
    <label class="form-check-label" for="ADD">Add new report</label>

    <input type="radio" name="type" id="DELETE" class="reqType">
    <label class="form-check-label" for="DELETE">Delete report</label>

    <!-- 'Add report' fields -->
    <div class="optionalInfo newRepData">
      <label for="reportId">New Report ID :</label>
      <input type="text" name="reportId" id="reportId">

      <label for="reportName">New Report Name :</label>
      <input type="text" name="reportName" id="reportName">
    </div>

    <br><br><input type="submit" value="Submit Request">

  </form>



</body>

</html>

user_139975980
Related