Caselle di controllo di convalida in HTML

Question

Ho un modulo ci sono 4 opzioni (possono essere caselle di controllo o radio).

Desidero selezionare più opzioni, ma una è obbligatoria.

So che è possibile in JS/jQuery ma voglio una soluzione di base HTML/CSS.

Answer 1

Per poter controllare più input, devono essere caselle di controllo. (Si potrebbero essere pulsanti di opzione con nomi diversi, ma non sarebbe in grado di deselezionare una volta controllato.)

Quindi usano caselle di controllo, e mostrano il pulsante di invio solo se ogni sono controllati, utilizzando il general sibling selector (~):

input[type="Submit"] { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<input type="Submit">

---

Se si desidera che il pulsante l'aspetto di un disabile presentare, aggiungere un secondo pulsante che è disattivato.

Se non si fa clic su alcun input, mostrare solo il pulsante di invio disabilitato. Quando uno o più ingressi sono cliccato, visualizza il pulsante di invio abilitato solo:

input[type="Submit"]:not([disabled]) { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"]:not([disabled]) { 
 
    display: inline; 
 
} 
 

 
input:checked ~ input[disabled] { 
 
    display: none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 

 
<input type="Submit" disabled> 
 
<input type="Submit">

Answer 2

È possibile utilizzare quanto segue per il quale è obbligatorio.

<input type="radio" name="name" required> 

Quale senza richiesta non verrà testato se è spuntata o meno.

Answer 3

È possibile farlo in HTML5 utilizzando l'attributo required Come

<input type="checkbox" required name="your_checkbox_name"> 

Questo dice al browser che il modulo non dovrebbe essere quello di presentazione, senza la casella di controllo essendo checked.Although vi consiglio java-script dal momento che non tutti i browser essere in grado di riconoscerlo.

O

Se si vuole rilevare se almeno una casella di controllo è selezionata come suggerito da @RickHitchcock nelle commenti, Si potrebbe utilizzare

span { 
 
    display: inline; 
 
    color: red; 
 
} 
 
input[type="Submit"], 
 
input:checked ~ span { 
 
    display: none; 
 
} 
 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<form action="#" method="post"> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="submit" value="Submit" /><span>! Please check at least one checkbox</span> 
 

 
</form>

Answer 4

seguito alla risposta di @Rick Hitchcock, penso che si vuole mostrare all'utente il pulsante invia ma verrà disabilitato fino a quando una delle caselle di controllo sarà selezionata.

Se è così, è possibile utilizzare pointer-events (in tutti i browser moderni: http://caniuse.com/#feat=pointer-events) come questo:

input[type="Submit"] { 
 
    opacity:0.5; 
 
    pointer-events:none; 
 
    /* animation added for fancy ;) */ 
 
    transition:all .2s ease; 
 
} 
 

 
input:checked ~ .button-wrapper input[type="Submit"] { 
 
    opacity:1; 
 
    pointer-events:all; 
 
} 
 

 
.button-wrapper { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.button-wrapper:before { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 

 
input:checked ~ .button-wrapper:before { 
 
    display:none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<div class="button-wrapper"> 
 
    <input type="Submit" tabindex="-1"> 
 
</div>

Edit mi è stata aggiunta una "maschera" in .button-wrapper:before così lo farà lavoro nei vecchi browser.

Answer 5

Try This:

<input id="c3" type="checkbox" required><label for="c3">Third</label><br> 
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br> 

Oppure si può provare questo utilizzando jQuery per convalidare una casella di controllo HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Makes "field" always required. Nothing and blanks are invalid. </title> 
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> 

</head> 
<body> 
<form id="myform"> 
<label for="field">Required: </label> 
<input type="text" class="left" id="field" name="field"> 
<br/> 
<input type="submit" value="Validate!"> 
</form> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">  </script> 
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script> 
<script> 
// just for the demos, avoids form submit 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
$("#myform").validate({ 
    rules: { 
field: { 
    required: true 
} 
    } 
}); 
</script> 
</body> 
</html> 

required è il modo html convalida cose