드롭 다운 옵션을 통해 필수 필드 정의

Question

< 선택> 옵션에 따라 텍스트 필드에서 필수 속성을 추가/제거 할 수 있습니까?

예 : 옵션 3을 선택하면 모든 필드가 required이됩니다. 그밖에 만 field1 & fieldX이 필요합니까?

HTML

<form id=section3Form> 
    <input type="text" id="field1"> 
    <input type="text" id="field2"> 
    <input type="text" id="field3"> 
    <input type="text" id="field4"> 
    <select id="fieldP" required> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
     <option value="option3">Option 1</option> 
    </select> 

    <button type="submit" id="submitBtn" value"Submit"> 
</form> 

JQ :

$(#submitBtn).click(function(){ 
    if ($('#fieldP').val() == "option3") { 
     //all fields are required 
} else { 
    //field1` & `fieldX are required. 
} 
}); 

Answer 1

난 당신이 달성하려고하는지 이해한다면, 다음 코드를 사용하여 자바 스크립트에 대해 좀 더 역동적으로 만들 수 있습니다. 그냥 각 옵션에 추가 데이터가 필요 (쉼표로 구분 된 목록으로) 필수 입력 속성과 작동합니다 :

HTML

<form id="section3Form"> 

    <input type="text" id="field1"> 

    <input type="text" id="field2"> 

    <input type="text" id="field3"> 

    <input type="text" id="field4"> 

    <select id="fieldP" required> 

     <option value="option1" data-required="field1,field2">Option 1</option> 

     <option value="option2">Option 2</option> 

     <option value="option3" data-required="field3">Option 3</option> 

    </select> 

    <input type="submit" id="submitBtn" value"Submit"> 

</form> 

자바 스크립트

$(function(){ 

    $("#submitBtn").click(function(e){ 

     var selected = $('#fieldP option:selected'); 

     var required = selected.attr('data-required') ? selected.attr('data-required').split(",") : undefined; 

     if(required) { 

      $.each(required, function(index, value) { 

       alert("Input = " + value + " is Required"); 

      }); 
     } 

    }); 

}); 

Answer 2

나는이 당신을 위해 사용할 수 있습니다 귀하의 질문을 이해로서 :

<script> 
    $(document).ready(function() { 
     $('#fieldP').change(function(){ 
      if($('#fieldP').val() == "option3")    
      { 
       $("input[id^='field']").attr('required','required'); 
      } 
      else 
      { 
       $("#field1").attr('required','required'); 
       // same for fieldx 
       // to remove required attribute 
       //$("#field1").removeAttr('required'); 
      } 
     }); 
    }); 
</script> 

Answer 3

이 기능을 사용할 수 있습니다 ....

function bindRequired(select, value, fieldsId, invert){ 

    var fields = fieldsId.map(function(id){ 
     return document.querySelector(id); 
    }).filter(function(el){ 
     return !!el; 
    }); 

    function changeEvent(){ 



     var isRequired = select.options[select.selectedIndex].value == value; 

     if(invert) isRequired = !isRequired; 

     var method = isRequired ? "setAttribute" : "removeAttribute"; 
     fields.forEach(function(field){ 

       field[method]("required", isRequired);   
     }); 

    } 

    select.addEventListener("change", changeEvent); 

    changeEvent(); 

} 

bindRequired(document.querySelector("#fieldP"), "option2", ["#field1", "#field3"]); 
bindRequired(document.querySelector("#fieldP"), "option3", ["#field1", "#field2", "#field3", "#field4"]); 

jsFiddle에서 작업 참조하십시오. http://jsfiddle.net/h3jum8sf/