如何使用JavaScript在一種形式中驗證兩組單選按鈕？

Question

我在一種形式中有兩組單選按鈕。如果你沒有選中每個單選按鈕，你就不應該發送表單。如果可能的話，我想要一個解決方案，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

將您的支票集中在一個功能中。另外我會建議附加一個提交處理程序與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") 
}); 

注意，jQuery的提交處理程序被包裹在一個onDomReady處理程序。

另外：客戶端驗證是從不安全。爲了確保輸入數據，在後端驗證它。

Answer 2

與驗證嘗試checked箱長度和形式，而不是button點擊onsubmit添加validation功能。沒有需要兩個函數只單一的功能還是足夠

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

呼叫在函數validateDateOne()的else條件中使用反函數語句的函數validateDateTwo()，而不是在onclick中調用它。

對於Pure 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>