![](/img/trans.png)
[英]How to validate different input submit buttons in one form using javascript
[英]How to validate two sets of radio buttons in one form using JavaScript?
我有兩種單選按鈕。 如果您未選中每套單選按鈕,則不應該發送表格。 如果可能的話,我只想用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>
在功能validateDateTwo()
的else條件內使用retrun語句調用功能validateDateOne()
而不是在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>
將支票歸為一個功能。 另外,我建議使用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處理程序中。
另外:客戶端驗證永遠都不安全。 為了確保輸入數據正確,請在后端也進行驗證。
與驗證嘗試checked
框的長度,並添加validation
函數onsubmit
的形式,而不是button
點擊。沒有需要兩個函數只單一的功能就夠了
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.