Jquery Add Required to Input Fields

jQuery add required to input fields

$("input").prop('required',true);

DEMO FIDDLE

Add required attribute when fields are visible

$('#businessname').attr('required');​​​​​ retrieves the value of the attribute. To set it, you have to give a value to set: $('#businessname').attr('required', 'required');​​​​​

But for required and similar, it's better to use the reflected property instead. Reading: x = $('#businessname').prop('required');, writing: $('#businessname').prop('required', true); or $('#businessname').prop('required', false);.

How to add required attribute to selected option in JavaScript/jQuery

You need to target the inputs and selects to set required, not the table itself. There was also a misplaced </tr></table> which I removed. Lastly, if you call .change() on page load, then it will hide your tables right away and mark all input/selects as optional until a product is selected.

Note: you'll need to add back in action="index2.php" - the form isn't submitting on SO when this value is set.

$(function() {
  $('.product').change(function() {
    var option = $(this).find('option:selected');
    var value = '.' + option.val();
    
    // hide all tables, set all fields to optional
    $('.show-form').hide();
    $('.show-form input, .show-form select').removeAttr('required');
    
    // show selected table, set selected input/selects as required
    $(value).show(300);
    $(value + ' input, ' + value + ' select').attr('required', true);
  });
  $('.product').change(); // hide tables and set fields to optional on load
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Add</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form class="form">
    <td>
      <label for="product">Select type of product: </label>
    </td>
    <td>
      <select id="product" class="product" name="product">
        <option value="none" default>----- Select product from list below -----</option>
        <option value="dvd">DVD disc</option>
        <option value="box">Box</option>
      </select>
    </td>

    <fieldset class="show-form dvd">
      <legend>DVD size: </legend>
      <div>
        <label for="dvd">Size: </label>
        <input class="dvd" id="dvd" type="number" step="0.001" min="0" placeholder="Enter DVD size" />
        <p>Please provide DVD disc size in MB</p>
      </div>
    </fieldset>

    <fieldset class="show-form box">
      <legend>Box dimensions: </legend>
      <table>
        <tr>
          <td>
            <label for="height">Height: </label>
          </td>
          <td>
            <input class="box" id="height" type="number" min="0" placeholder="Height of Box" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="width">Width: </label>
          </td>
          <td>
            <input class="box" id="width" type="number" min="0" placeholder="Width of Box" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="length">Length: </label>
          </td>
          <td>
            <input class="box" id="length" type="number" min="0" placeholder="Length of Box" />
          </td>
        </tr>
      </table>
      <p>Please provide dimensions for Box in HxWxL format</p>
    </fieldset>

    <input type="submit" value="Save" />
  </form>
</body>

</html>

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

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>

Enable inputs and add required attribute with jquery

Add your inputs: 

<input class=“my_input”></input>
<input class=“my_input”></input>
<input class=“my_input”></input>

Create disable and enable functions:

function disable() {
    $(“.my_input”).css(“pointer-events”, “none”)
}

function enable() {
    $(“.my_input”).css(“pointer-events”, “auto”)
}

Call those functions when and as needed.

how to add 'required' attribute to input field based on other fields values

you can use ng-required here

<input class="text_field" id="ProfilePhoneNumber" phone-by-state="User.PhoneNumber" type="text" 
    ng-required="User.Notifications.Phone.High == 1 || User.Notifications.Phone.Medium == 1 || User.Notifications.Phone.Low == 1 || User.SMS.Enabled == 1" />

ng-required will sets required attribute on the element if expression pass to ng-required sets to true.

How to add and remove a required attribute with a Toggle

You can use the same boolean you're using to toggle the textarea: this.checked. Then set the required property to your motif select and motif-text textarea like this:

$('input[name="messagetick"]').click(function () {
    $('#motif-reject').toggle(this.checked);
    $("textarea[name='motif-text']").prop("required", this.checked);
    $("select[name='motif']").prop("required", !this.checked);
});

Please try the following snippet:

$('input[name="messagetick"]').click(function () {    $('#motif-reject').toggle(this.checked);    $("textarea[name='motif-text']").prop("required", this.checked);    $("select[name='motif']").prop("required", !this.checked);    console.log("Checkbox check: " + this.checked);    console.log("Textarea required: " + $("textarea[name='motif-text']").prop("required"));    console.log("Select required: " + $("select[name='motif']").prop("required"));    console.log("----------------------------------");});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">    <select name="motif" class="form-control input-lg" required>        <option selected="true" disabled="disabled" value="">Select</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="form-group">    <input name="messagetick" id="messagetick2" type="checkbox" value="yes" />    Other</div><div id="motif-reject" class="form-group" style="display: none">    <textarea class="form-control" rows="5" placeholder="reason" name="motif-text"></textarea></div>

Related Topics

Creating a JavaScript Cookie on a Domain and Reading It Across Sub Domains

Javascript: Find Longest Word in a String

Object.Getownpropertynames VS Object.Keys

JavaScript Return Number of Days,Hours,Minutes,Seconds Between Two Dates

How to Sort in Mongoose

Protractor Set Global Variables

How to Import Image (.Svg, .Png ) in a React Component

How to Handle Circular Dependencies with Requirejs/Amd

JavaScript Equivalent of Jquery's Extend Method

How to Get the Containing Form of an Input

How to Make an Angularjs Directive to Stoppropagation

Unsigned Integer in JavaScript

Can't Access Cookies from Document.Cookie in Js, But Browser Shows Cookies Exist

Using Await Outside of an Async Function

How to Create a Session Using JavaScript

How to Completely Disable Any Mouse Click

Passing Variables to the Next Middleware Using Next() in Express.Js

Open Page in New Window Without Popup Blocking


Leave a reply



Submit