Mi sto solo chiedendo come utilizzare il nuovo attributo di input HTML5 "richiesto" nel modo giusto sui pulsanti di opzione. Ogni campo del pulsante di opzione richiede l'attributo come sotto o è sufficiente se viene acquisito da un solo campo?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Risposte:
TL; DR: imposta l' requiredattributo per almeno un ingresso del gruppo radio.
L'impostazione requiredper tutti gli ingressi è più chiara, ma non necessaria (a meno che non si generino dinamicamente pulsanti di opzione).
Per raggruppare i pulsanti di opzione devono avere tutti lo stesso namevalore. Ciò consente di selezionarne solo uno alla volta e si applica requireda tutto il gruppo.
<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>Prendi nota anche di:
Per evitare confusione sulla necessità o meno di un gruppo di pulsanti di opzione, gli autori sono invitati a specificare l'attributo su tutti i pulsanti di opzione in un gruppo. In effetti, in generale, gli autori sono incoraggiati a evitare di avere gruppi di pulsanti di opzione che non hanno controlli inizialmente controllati, in quanto si tratta di uno stato in cui l'utente non può tornare e pertanto è generalmente considerata un'interfaccia utente scadente.
Puoi utilizzare questo frammento di codice ...
<html>
<body>
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Specificare la parola chiave " richiesta " in una delle istruzioni selezionate . Se vuoi cambiare il modo predefinito del suo aspetto. Puoi seguire questi passaggi. Questo è solo per informazioni extra se hai intenzione di modificare il comportamento predefinito.
Aggiungi quanto segue nel tuo .cssfile.
/* style all elements with a required attribute */
:required {
background: red;
}Per ulteriori informazioni è possibile fare riferimento al seguente URL.
Se i pulsanti di opzione sono stati personalizzati, ad esempio l'icona originale del pulsante di opzione è stata nascosta tramite CSS in display:nonemodo da poter creare il proprio pulsante di opzione, è possibile che venga visualizzato l'errore.
Il modo per risolverlo è sostituirlo display:noneconopacity:0
display:none. Quello è già risposto qui: stackoverflow.com/questions/49687229/...
Ecco un'implementazione molto semplice ma moderna dei radiobutton richiesti con validazione HTML5 nativa:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Anche se sono un grande fan dell'approccio minimalista all'utilizzo della convalida HTML5 nativa, potresti volerlo sostituire con la convalida Javascript a lungo termine. La convalida Javascript offre un controllo molto maggiore sul processo di convalida e consente di impostare classi reali (anziché pseudo-classi) per migliorare lo stile dei campi (in) validi. Questa convalida HTML5 nativa può essere il tuo fallback in caso di Javascript non funzionante (o mancante). Puoi trovare un esempio di questo qui , insieme ad altri suggerimenti su come creare forme migliori , ispirato da Andrew Cole .
Ho dovuto usare required="required"con lo stesso nome e lo stesso tipo di validazione ha funzionato bene.
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"