JavaScriptを使用して2つのラジオボタンを1つのフォームで検証する方法はありますか？

Question

私は1つの形式で2つのラジオボタンのセットを持っています。セットごとに1つのラジオボタンをチェックしていない場合は、フォームを送信することはできません。可能であれば、JSのみ（jQueryはありません）のソリューションが欲しいです。私はここで古い質問に役立つ機能を見つけ、それを私のケースに適応しようとしましたが、明らかに失敗しました。私のミスはどこですか？

<form> 

<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> /> 
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> /> 
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> /> 
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> /> 

<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> /> 
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> /> 
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> /> 
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> /> 

<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne(); return validateDateTwo();'/> 

</form> 

<script> 

function validateDateOne() { 
     if (!$("input[name='date_1']:checked").val()) { 
      alert('Please choose your favourite date'); 
      return false; 
     } 
     else {} 
} 

function validateDateTwo() { 
     if (!$("input[name='date_2']:checked").val()) { 
      alert('Please choose a second date'); 
      return false; 
     } 
     else {} 
} 

</script> 

Answer 1

小切手を1つの機能でグループ化します。また、jQueryを使用してサブミットハンドラをアタッチすることをお勧めします。ここで

はjQueryのハンドラを提出することに取り組んでjsfiddle

<input type="submit" name="send" value="send" id="submit" /> 


$('#myform').submit(function(e){ 
     e.preventDefault(); 
     if (!$("input[name='date_1']:checked").val()) { 
      alert('Please choose your favourite date'); 
      return; 
     } 
     if (!$("input[name='date_2']:checked").val()) { 
      alert('Please choose a second date'); 
      return; 
     } 
     alert("submit") 
}); 

注意がonDomReadyハンドラに包まれています。

また、クライアント側の検証はで、NEVERは安全です。入力データを確認するには、バックエンドでもそれを検証します。

Answer 2

唯一の機能が十分に

function validateDate() { 
 
    if (!$("input[name='date_1']:checked").length) //validate first one 
 
    { 
 
    console.log('select any one in first part'); 
 
    return false; 
 
    } 
 
    if (!$("input[name='date_2']:checked").length) //validate second one 
 
    { 
 
    console.log('select any one in second part') 
 
    return false; 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form onsubmit="return validateDate()"> 
 
    <!--only do with single function--> 
 

 
    <input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> /> 
 
    <input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> /> 
 
    <input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> /> 
 
    <input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> /> 
 

 
    <input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> /> 
 
    <input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> /> 
 
    <input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> /> 
 
    <input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> /> 
 

 
    <input type="submit" name="send" value="send" id="submit" /> 
 

 
</form>

Answer 3

コールで2つの機能を必要とする.NO checkedボックスの長さを検証し、代わりにbuttonクリックの形のonsubmitでvalidation機能を追加して試してみてください関数validateDateTwo()がretclunステートメントを持つ関数validateDateOne()のelse条件の中でonclickで呼び出すのではなく、

純粋なJS溶液の場合、$の代わりにquerySelectorを使用しました。

function validateDateOne() { 
 
     if (!document.body.querySelector("input[name='date_1']:checked")) { 
 
      alert('Please choose your favourite date'); 
 
      return false; 
 
     } 
 
     else { 
 
     return validateDateTwo(); 
 
     } 
 
} 
 

 
function validateDateTwo() { 
 
     if (!document.body.querySelector("input[name='date_2']:checked")) { 
 
      alert('Please choose a second date'); 
 
      return false; 
 
     } 
 
     else {} 
 
}

<form> 
 

 
<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" />2017-10-27 
 
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" />2017-10-28 
 
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-10-28" />2017-10-28 
 
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" />2017-11-04 
 
<br/> 
 
<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" />2017-10-27 
 
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" />2017-10-28 
 
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" />2017-10-28 
 
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" />2017-11-04 
 

 
<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne();'/> 
 

 
</form>