Me pregunto cómo usar el nuevo atributo de entrada HTML5 "requerido" de la manera correcta en los botones de radio. ¿Todos los campos de botones de radio necesitan el atributo siguiente? ¿O es suficiente si solo un campo lo consigue?HTML5: cómo usar el atributo "requerido" con un campo de entrada "radio"
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Establecer el atributo required para al menos una entrada del grupo de radio.
Configuración required para todas las entradas es más claro, pero no es necesario (a menos que la generación dinámica de radio-botones).
Para agrupar botones de opción, todos deben tener el mismo valor name. Esto permite que solo se seleccione uno a la vez y aplica required a todo el grupo.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>También tomar nota de:
Para evitar confusiones en cuanto a si se requiere o no un grupo de botones de radio, se recomienda a los autores especificar el atributo de toda la radio botones en un grupo. De hecho, en general, se alienta a los autores a evitar grupos de botones de opción que no tengan ningún control inicialmente marcado, ya que este es un estado al que el usuario no puede regresar y, por lo tanto, se considera una interfaz de usuario deficiente.
probar este ...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Si los botones de radio se han personalizado, por ejemplo, el icono original para el botón de radio se ha ocultado a través css display:none para que pueda crear su propio botón de radio, entonces es posible que obtenga el error.
La forma de solucionarlo es reemplazar con display:noneopacity:0
Una cosa muy importante que hay que recordar es que las entradas de radio y casillas de verificación están agrupados por el nombre de ** ** atributo. Entonces, la configuración requerida en cualquiera de las entradas (entre un grupo de entradas con el mismo nombre) funcionaría. Si, por otro lado, te pierdes el atributo ** name **, no funcionará como es de esperar. –
@kumar_harsh Muy buen punto. Un caso típico de alguien que omite el nombre es cuando se usa Angular ng-model. –
@kumar_harsh "El grupo de botones de opción que contiene un elemento de entrada a también contiene todos los demás elementos de entrada b que cumplen con todas las condiciones siguientes" (4) http://www.w3.org/TR/html5/forms.html # radio-button-group –