Question

以下是我的链接：http://vkacademy.in/medvanndemo/normal.html

选择主题有三个复选框。我在这些复选框的HTML5验证的第一个复选框中添加了required属性。

我遇到的问题是表单没有对所有复选框进行分组，因此在提交时会选中一个。

<form name="vk" action="" method="post"/>

Name:<input type="name" name="username" value="" required/><br/><br/>
password:<input type="password" name="password" value="" required/><br/><br/>
Please select subject:
<input  name="subject[]"  type="checkbox"  value="all" required>All Subject
<input  name="subject[]" type="checkbox"  value="science" >Science
<input  name="subject[]" type="checkbox"   value="maths">Maths<br/><br/><br/>

Please select Subject for class twelve<br/>

<input type="checkbox" name="classfivesubject[]" id="mat" value="BScTuition (Physics)" required >BScTuition (Physics)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Chemistry)">BSc Tuition (Chemistry)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (Computer)">BCA Tuition (Computer)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (IT)">BCA Tuition (IT)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Biology)">BSc Tuition (Biology)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology)<br/>
<input type="checkbox" name="BSc Tuition (MicroBiology)" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology)
<input type="checkbox" name="BSc Tuition (Zoology)" id="mat" value="BSc Tuition (Zoology)">BSc Tuition (MicroBiology)<br/>
<input type="submit" name="submit" value="Submit"/>
</form>

Answer 1

您的代码存在许多问题;

1）您已自行关闭表单标记。虽然许多浏览器会忽略这一点，但摆脱了自我关闭/>。

2）如果您希望用户从列表中选择一个选项，例如您的主题字段，则应使用单选按钮;

<input name="subject" type="radio" value="all" selected>All Subject
<input name="subject" type="radio" value="science">Science
<input name="subject" type="radio" value="maths">Maths

除此之外，您不能使用required参数作为复选框（在复选框数组*中）或单选按钮。对于单选按钮，您可以使用其中一个选项（通常是第一个）上的selected参数强制进行选择。如上所述。

3）您尚未向所有 Class 5主题复选框提供相同的name。我认为这只是一个错误。使用classfivesubject[]表示所有这些，如果使用单选按钮，则只需classfivesubject。

4）您为多个元素提供相同的id。这是糟糕的编码。 id应在页面上显示一次，并且只显示一次。要在多个元素中使用样式或其他功能，请使用class。

<input id="mat"> <!-- use once -->
<input class="mat"> <!-- can use multiple times -->

希望这有帮助。

*您只需在一个复选框上使用它，例如确认用户已接受条款和条件。

Answer 2

没有标准的HTML5方法可以做到这一点。您可以使用Jquery进行此类验证。

复选框和HTML5'必填'

2 个答案: