Change required field form when option is selected

select required not working
how to validate select option in javascript
how to validate select option in jquery
how to validate select option in javascript w3schools
form required fields
field required
bootstrap select required
spring form:select required

I have a form like below

       <form>
        <div class="6 op" style="display: none;">
        <div class="form-group">Service</label>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option></option>
                 <option>Fiber</option>
                 <option>Hotspot</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlInput1">Capacity</label>
              <input type="text" class="form-control" id="formGroupExampleInput" placeholder="example: 1" required>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option>Mbps</option>
                 <option>Gbps</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlTextarea1">Notes</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
           </div>
           <input type="submit">
        </div>
     </form>

In the code above, required is in service and capacity. I want to know how to add required to notes field automatically only when I choose Hotspot option in service field.

Do you know how to do that ?

Thank you

You can add onchange event handler to select option and as a param pass the value of the selected option. In this case when the value is hotspot you can use setAttribute to add the attribute required to the textarea else set it to false or remove it using removeAttribute. Also id of dom elements need to be unique

let txtArea = document.getElementById('exampleFormControlTextarea1');

function changeService(val) {
  if (val.toLowerCase() === 'hotspot') {
    txtArea.setAttribute('required', true)

  } else {
    txtArea.setAttribute('required', false)

  }

}
<form>
  <div class="6 op" style="">
    <div class="form-group"><label for='exampleFormControlSelect1'>Service</label>
      <select onchange='changeService(this.value)' class="form-control" id="exampleFormControlSelect1" required>
        <option></option>
        <option>Fiber</option>
        <option>Hotspot</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleFormControlInput2">Capacity</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
      <select class="form-control" id="exampleFormControlSelect2" required>
        <option>Mbps</option>
        <option>Gbps</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Notes</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <input type="submit">
  </div>
</form>

Can I apply the required attribute to <select> fields in HTML5 , Prerequisites: correct html5 DOCTYPE and a named input field <select <form action=""> <select required> <option selected disabled  In the Value column, leave a blank for your placeholder, then set the field to required if it isn’t already. With the field set to Required, any list option not containing a Value will not pass validation. In plain English, that means if a user doesn’t pick an actual option, the form won’t submit.

Check this simple example below , using jquery , if someone select specific role , code toggle class and toggle REQUIRED properties on chosen element

$('select#role').change(function(){
    let role = $(this).children("option:selected").val();
    if (role == 0 ){
      $('.detailed').removeClass("detailed");
      $('#employee').prop('required',true);
    }
    else{
      $('#staff').addClass("detailed");
      $('#employee').prop('required',false);
    }
}); // close $('select#role').change(function(){

Using the required attribute with the select element, HTML: The Markup Language – select – option-selection form control. So, if you are using the "required" attribute with a <select> element. Select the "RAM" Field. Go to properties tab > Manage rules. On manage rules window, click "New" > "Formating/Format" Check the checkbox, hide this control. Create a new condition for this rule, something like: if "device" field equals to "Desktop" Or >> if "device" field equals to "Laptop" Then click OK

let el = document.querySelector("#exampleFormControlSelect1");



el.addEventListener("change",(e)=>{

  if(el.options[el.selectedIndex].value == "Hotspot" ) {
  document.querySelector("#exampleFormControlTextarea1").setAttribute("required","");
} else {

document.querySelector("#exampleFormControlTextarea1").removeAttribute("required");
}

});
       <form>
        <div class="6 op" style="">
        <div class="form-group">Service</label>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option></option>
                 <option>Fiber</option>
                 <option>Hotspot</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlInput1">Capacity</label>
              <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option>Mbps</option>
                 <option>Gbps</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlTextarea1">Notes</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
           </div>
           <input type="submit">
        </div>
     </form>

How to Hide Form Fields Based Upon User Selection, Strategically hiding form fields until selected by a user can greatly improve user certain form fields conditional on based upon previous user-inputed options For validation purposes, some extra attributes are changed depending on the  Add a section and inside the section add the fields that you want to show/hide. Go to Section properties -> Display tab -> Conditional formatting and enter the condition. In your case the condition will based on whether the user has selected Yes or No in the field that contains the answer for the question “Do you like to go to the movies?”.

$('#serviceToggle').on('change', function () {
  var data = $(this).val();
  if (data == 'hotspot') {
    $('#notes').prop('required', true);
  } else {
    $('#notes').prop('required', false);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-group">
    <label for="serviceToggle">Service</label>
    <select class="form-control" id="serviceToggle" required>
       <option></option>
       <option value="fiber">Fiber</option>
       <option value="hotspot">Hotspot</option>
    </select>
   </div>
   <div class="form-group">
      <label for="exampleFormControlInput1">Capacity</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1">
      <select class="form-control" id="exampleFormControlSelect1" required>
         <option>Mbps</option>
         <option>Gbps</option>
      </select>
   </div>
   <div class="form-group">
      <label for="notes">Notes</label>
      <textarea class="form-control" id="notes" rows="3"></textarea>
   </div>
   <input type="submit" value="Submit">
</form>

HTML <select> Tag with the 'required' Attribute, You can test this in the above example by attempting to submit the form without selecting an option from the <select> list. Boolean Attribute. The required attribute​  Advanced Field Options. Advanced Field Options will provide even more customization options for your fields. To locate these, you’ll need to click on the Advanced Options section. Select a Field Size. Most fields will include an option to change the field size, which can be super useful when customizing the appearance of your forms.

You can achieve this using jQuery. You need to set the field to required on the onChange event of dropdown.

   // Perform some code on the change event of a dropdown
    $("#exampleFormControlSelect1").change(function () { 
    var selected = $(this).children("option:selected").val();
    // Get selected value and save it in selected variable
     console.log(selected);
       if(selected == "Fiber"){
          //check the selected value and set the field to required
          console.log('i am here');
          // Set capacity input to required if value if Fiber        
         // $("#capacity").attr('required',true);
// Set Notes field to required if value if Fiber
$("#exampleFormControlTextarea1").attr('required',true);
       }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form>
            <div class="6 op">
            <div class="form-group">Service</label>
                  <select class="form-control" id="exampleFormControlSelect1" required>
                     <option></option>
                     <option>Fiber</option>
                     <option>Hotspot</option>
                  </select>
               </div>
               <div class="form-group">
                  <label for="exampleFormControlInput1">Capacity</label>
                  <input type="text" class="form-control" id="capacity" placeholder="example: 1">
                  <select class="form-control" id="exampleFormControlSelect1">
                     <option>Mbps</option>
                     <option>Gbps</option>
                  </select>
               </div>
               <div class="form-group">
                  <label for="exampleFormControlTextarea1">Notes</label>
                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
               </div>
               <input type="submit">
            </div>
         </form>

The different types of form fields – Instapage Help Center, There are 3 primary form field editing options: Text fields can have email validation enabled, which means that they will not allow the visitor to submit the form  Hi there, I have the following code: Location 1 Location 2 Location 3 Location 4 Location 5 Location 6 Location 7 Themes Podcast Articles Premium Display element when specific option is selected

HTML <select> required Attribute, The required attribute of the <select> element is to let users know that the If you won't select the value from the drop-down and try to submit the form, it won't <​select required> <option value="">None</option> <option  Tip: You can also drag the field from the Fields task pane to the form. If you do this, the most appropriate control is used based on the field type. If the desired type is not selected by default, use the previous method to select the correct type, or right-click the control, click Change Control, and then click the desired control type.

Select Form Field: Placeholder option?, I'm adding a “Select” form field , and would like the first one to say “Please select”, while… the first row, then it is treated as a chosen value and recognized as if the required field is This will replace my ACCEPTANCE box which sucks as it If Option Button111 is selected, the following text will be displayed, "User will email form." If Option Button211 is selected, the following text will be displayed, "User will mail form via FedEx." This is what I got, so far. Am I on the right track? Should I have two seperate macros or can this be written into one? Thanks!

Forms · Bootstrap, <select class="form-control form-control-lg"> <option>Large select</option> Checkboxes and radios use are built to support HTML-based form validation and a flexbox utility to vertically center the contents and changes .col to .col-auto so​  What you could do is each radio button will have a Mouse up action that sets each text field to be required. But the issue that you run into is if they change their selection, then more than one field will be required. So you need to ensure that the other fields are unset from being required.

Comments
  • First , you should not use the same ID for elements :) [ dont copy] ;) / Second , you can use element.change(function(){} on <select> and in body change properties to required
  • the question asked to add required on notes not in capacity xD
  • You can do the same with capacity. Simply change the element id in JS/jQuery to get the desired results.
  • Anyways, i have updated the answer, you can check it now