2017-02-17 140 views
0

我使用HTML5驗證功能製作表單。檢查是否至少有一個複選框使用HTML5進行檢查

實施例:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Form Test</title> 
</head> 
<body> 
    <form id="form1" method="post" action=""> 
     <label><input type="checkbox" name="color1" value="1" required />Green</label><br /> 
     <label><input type="checkbox" name="color2" value="2" required />Red</label><br /> 
     <label><input type="checkbox" name="color3" value="3" required />Yellow</label><br /> 
     <label><input type="checkbox" name="color4" value="4" required />Blue</label><br /> 
     <input type="submit" /><input type="reset" /> 
    </form> 
</body> 
</html> 

我需要,如果至少一個複選框被選中它來驗證。

「必須至少選中一個複選框。」

我找到答案在這裏:
Jquery - check if at least one checkbox is checked
Check if at least one checkbox is checked using jQuery
Making sure at least one checkbox is checked
Submit form only if at least one checkbox is checked

但使用JavaScript,jQuery和等

只使用HTML5可以化妝?

+0

用戶必須做出選擇,對不對?那麼,您的應用程序將如何通知沒有javascript的用戶選擇或將數據發送到服務器進行驗證?所以,是的,我認爲這是不可能的... – mickdev

+0

如果你可以移動標籤之外的輸入,你可以在這裏試試我的答案:http://stackoverflow.com/a/33842776/3903374 –

+0

@RickHitchcock,我會考慮用你的解決方案。非常感謝你。 :-D – Dadeke

回答

0

這是不可能的。你必須通過JS綁定一個函數來檢查它是否爲onchange,這個函數計算被選中的複選框的數量。複選框的required屬性要求檢查所有這些屬性(對於無線電屬性,只需要檢查一個值)。

0

嘗試下面的代碼.......

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Form Test</title> 
 
</head> 
 
<body> 
 
    <form id="form1" method="post" action=""> 
 
     <label><input type="radio" name="color1" value="1" checked />Green</label><br /> 
 
     <label><input type="radio" name="color1" value="2" required />Red</label><br /> 
 
     <label><input type="radio" name="color1" value="3" required />Yellow</label><br /> 
 
     <label><input type="radio" name="color1" value="4" required />Blue</label><br /> 
 
     <input type="submit" /><input type="reset"/> 
 
    </form> 
 
</body> 
 
</html>

相關問題