Tengo un formulario como el de abajo

       <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>

En el código anterior, required está en service y capacity. Quiero saber cómo agregar required al campo notes automáticamente solo cuando elijo la opción Hotspot en el campo service.

Sabes como hacer esto ?

Gracias

0
Ikram Shabri 29 oct. 2019 a las 10:47

5 respuestas

La mejor respuesta

Puede agregar el controlador de eventos onchange para seleccionar la opción y, como parámetro, pasar el valor de la opción seleccionada. En este caso, cuando el valor es punto de acceso, puede usar setAttribute para agregar el atributo required al área de texto; de lo contrario, configúrelo como falso o elimínelo con removeAttribute. También la identificación de los elementos dom debe ser única

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>
1
brk 29 oct. 2019 a las 07:58

Verifique este sencillo ejemplo a continuación, usando jquery, si alguien selecciona un rol específico, una clase de alternar código y alternar propiedades REQUERIDAS en el elemento elegido

$('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(){
0
oleevier 29 oct. 2019 a las 07:58

Puede lograr esto usando jQuery. Debe establecer el campo como requerido en el evento onChange del menú desplegable.

   // 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>

En el ejemplo anterior, el campo Notas será obligatorio, si selecciona Fibra en el menú desplegable Servicio.

0
Optimum Creative 29 oct. 2019 a las 15:09
$('#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>
0
Vpa 29 oct. 2019 a las 08:29
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>

En primer lugar, elimine la pantalla: ninguna propiedad del primer div. Luego verifique los códigos anteriores.

0
dnaz 29 oct. 2019 a las 08:06