Erforderliches Attribut zur Anpassung der Optionsschaltfläche in HTML

Question

Ich verwende benutzerdefinierte Optionsschaltfläche. Außerdem wurde das erforderliche Attribut hinzugefügt.

Erforderlich arbeitet aber ERROR nicht gezeigt ....

Formular nicht ohne Auswahl Radio vorgelegt bekommen ....

Aber

„Bitte wählen Sie eine dieser Optionen "

Fehler wird nicht angezeigt.

Code ist:

<form> 
<div class="form-field-label">Change In Weight :</div> 
      <div class="form-field-input"> 

    <input type="radio" name="change_in_weight" id="change_in_weight1" required value="Maintained" class='radiobutton'><label for="change_in_weight1" class='radiobutton-label'>Maintained</label><br> 
    <input type="radio" name="change_in_weight" id="change_in_weight2" value="Increasing abnormally since last one year" class='radiobutton'><label for="change_in_weight2" class='radiobutton-label'>Increasing abnormally since last one year</label><br> 
    <input type="radio" name="change_in_weight" id="change_in_weight3" value="Decreasing abnormally since last one year" class='radiobutton'><label for="change_in_weight3" class='radiobutton-label'>Decreasing abnormally since last one year</label><br> 
       </div> 
<br> 
<input type="submit" value="send"> 
</form> 

CSS:

.radiobutton-label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 15px; 
} 

input[type="radio"] { 
display:none; 
margin: 10px; 
} 

.radiobutton-label:before { 
    content:""; 
    display: inline-block; 
    width: 24px;  
    height: 24px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottom: 1px; 
} 
input[type=radio] + label:before { 
    background: url('http://drdilipgadgil.com/img/vlad.png') 2px 4px no-repeat; 
} 

input[type=radio]:checked + label:before { 
    background: url('http://drdilipgadgil.com/img/vlad.png') 2px -18px no-repeat; 
} 
:required:focus { 
    box-shadow: 0 0 6px rgba(255,0,0,1); 
} 

Hier ist JSFIDDLE

Answer 1

Im Fall von benutzerdefinierten Radio-Buttons, müssen Sie Fehlerfälle separat behandeln. Der Fehler wird nicht angezeigt, da die Optionsfelder ausgeblendet sind. Wenn Sie für die Optionsfelder "display: block" angeben, können Sie den Fehler nach dem Senden sehen. So können Sie für zwei Lösungen gehen.

Halten Standardradiobuttons

ODER

Handle Fehlerfall über JS, und zeigen, benutzerdefinierte Nachricht.

Answer 2

Versuchen Sie einfach, eine Funktion in Javascript zu machen, wenn Sie auf die Schaltfläche klicken und das Optionsfeld ist leer (nichts ausgewählt) zeigen Sie einfach den Fehler in einem Div oder was auch immer Sie wollen. (Zum Beispiel einfach Alarm verwenden, um es einfach zu testen)