必須フィールドは要素表示時にのみ必要です。

Question

私は、ユーザーにラジオボタンの形式で権限を与えられた代表者がいるかどうか尋ねられるフォームを持っています。ユーザーが「はい」オプションを選択すると、代理人に関するさらに多くのフィールドが表示され、必要な入力「代表メール」が表示されます。

ユーザーが「はい」オプションを選択した場合にのみ必要な方法はありますか？ユーザーが「オプションなし」を選択した場合、フォームはこの必須フィールドの値を検索し続けるため、送信しません。

<form> 

<div class="onBehalfOf"> 
<input type="radio" checked="checked" name="Radio" id="yes" value="Yes"> 
<label for="yes"> Yes</label> 
<input type="radio" name="Radio" id="no" value="No"> 
<label for="no"> No</label> 
</div> 

<div class="authorizedRep"> 
Email: 
<input type="email" required /> 
</div> 

<input type="submit" label="submit" /> 

</form> 

js Fiddle Example

Answer 1

小さな変更で、あなたは表示/非表示のフィールドを電子メール入力のrequired属性を切り替えることができます。適切なemailInputクラスを要素に追加するだけです。

$('.onBehalfOf input:radio').change(function() { 
    if ($(this).is(':checked') && $(this).val() == 'No') { 
    if ($('.authorizedRep').hasClass("hide")) { 

    } else { 
     $('.authorizedRep').addClass("hide"); 
     $('.emailInput').removeAttr('required'); 
    } 
    } 

    if ($(this).is(':checked') && $(this).val() == 'Yes') { 
    $('.authorizedRep').removeClass("hide"); 
    $('.emailInput').attr('required'); 
    } 
});