Динамическое включение и выключение требуемого поля

Я разрабатываю простую форму с двумя выпадающими списками. Второй снимок будет загружен после выбора первого выпадающего списка. И на основе второго выпадающего выбора появится либо загрузка файла, либо текстовое поле. После нажатия кнопки «Отправить» файл должен быть загружен или имя файла должно быть получено из формы.Динамическое включение и выключение требуемого поля

Но я выдаю требуемое поле. Я имею в виду, когда я выбираю параметр имени файла из второго выпадающего списка и даю имя файла в качестве ввода, и отправляю форму, он все равно запрашивает загрузку файла (потому что я установил оба по необходимости).

Может ли кто-нибудь сказать мне, как установить требуемый динамически?

Мой код так для:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample Form</title> 



<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<script> 
    $(document).ready(function(e) { 
     $('#data').change(function() { 
      if ($(this).val() == 'inputfile') { 
       $('#inputfile').show(); 
       $('#submitform').show(); 
       $('#fileName').hide(); 

      } else if ($(this).val() == 'serverdata') { 
       $('#fileName').show(); 
       $('#submitform').show(); 
       $('#inputfile').hide(); 
      } else { 
       $('#fileName').hide(); 
       $('#inputfile').hide(); 
       $('#submitform').hide(); 
      } 

     }); 
    }); 

    function ChangeDropdowns() { 

     $(".style-sub-1").show(); 
    } 
</script> 
</head> 

<body> 

    <div class="container"> 
     <div class="box"> 
      <form> 
       <div class="ccms_form_element cfdiv_custom"> 

        <div class="col-md-4"> 
         <label for="inputType">Input Type</label> 
        </div> 
        <div class="col-md-8" style="font-size: 16pt;"> 
         <select id="inputType" required name="inputType" 
          style="width: 500px" onChange="ChangeDropdowns();"> 
          <option value="">Select Type : Type Of You Want to 
           Process</option> 
          <option value="text">Text</option> 
          <option value="genome">Numbers</option> 
          <option value="chacha">Special Characters</option> 
         </select> 
        </div> 
       </div> 


       <div class="style-sub-1" id="dataType" style="display: none;"> 
        <div class="col-md-4"> 
         <label for="inputType">Data Type</label> 
        </div> 
        <div class="col-md-8" style="font-size: 16pt;"> 
         <select id="data" required name="data" style="width: 500px"> 
          <option value="">Select Data Source : Where is your 
           Data?</option> 
          <option value="serverdata">Data is already in Server</option> 
          <option value="inputfile">Need to Upload the File</option> 

         </select> 
        </div> 
       </div> 


        <div class="row" id="inputfile" style="display: none;"> 


         <div class="col-md-4"> 
          <label for="file">Input File</label> 
         </div> 
         <div class="col-md-8"> 
          <input id="file" type="file" 
           style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; font-size: 20pt; font-style: bold" 
           required> 
         </div> 
        </div> 

       <div class="row" id="fileName" style="display: none;"> 

        <div class="form-group"> 
         <label for="exampleInputName2">File Name</label> <input 
          type="text" class="form-control" style="width: 400px" 
          id="exampleInputName2" 
          placeholder="Enter File Name with full path in the Server" required> 
        </div> 
       </div> 

       <div class="row" id="submitform" style="display: none;"> 
        <input type="submit" id="btnSubmit" value="Submit" 
         class="btnSubmit" /> 
       </div> 
      </form> 
     </div> 
    </div> 

</body> 

</html>

источник

2015-03-14 Anonymous

Это покажет вам, как добавить или удалить "требуется" из элемента:

function toggleRequired(){ 
 
    var txt = $('#text1'); 
 
    
 
    
 
    //Remove the "required" attribute. 
 
    txt.removeAttr("required"); 
 
    alert(txt[0].outerHTML); 
 
    
 
    //Add the "required" attribute. 
 
    txt.attr("required", "true"); 
 
    alert(txt[0].outerHTML); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="text1" required /> 
 
<br /> 
 
<input type="button" id="btnToggleRequired" onclick="toggleRequired()" value="Toggle Required" />

источник

2015-03-14 02:20:04 Seamus

Это хорошо работает. Я добавил функцию attr –

Я лично рекомендую что вы отказываетесь от проверки HTML-формы с помощью некоторых JS для обеспечения гомогенного поведения между браузерами.

Заканчивать этот JSFiddle

Я использую jQuery Validation большой плагин для этого.

jQuery(function($){ 
    $("#daform").validate({ 
     rules: { 
      dynamic_text1: { 
       required: { 
        depends: function(){ 
         return $("#daselect").val(); 
        } 
       } 
      } 
     }, 
     submitHandler: function(form){ 
      console.log('passed validation, now do form.submit() to actually send the form'); 
     } 
    }); 
});

источник

2015-03-14 02:40:02 josegomezr

Динамическое включение и выключение требуемого поля

ответ

Смежные вопросы