Wie machen Sie eine obligatorische Checkbox in einem Formular?

Question

Ich brauche ein Kontrollkästchen, wo Sie von einer Seite zu einer anderen wechseln, nachdem Sie auf das Feld geklickt haben. Das Kontrollkästchen sollte erforderlich sein, da Sie den Link zu den Nutzungsbedingungen daneben gelesen haben.

Ich bin nur halb sicher, wie dies zu tun, so etwas wie diese:

<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" /> 

mit JQuery:

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
     if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') { 
       return true; 
     } else { 
      $('#confirm_terms_hint').text('Please try again - you need to check the box to move on'); 
      $('#confirm_terms_hint').css('font-weight', 'strong'); 
      return false; 
     } 
} 
</script> 

Im Moment aber ich nicht auf das Kontrollkästchen alle sehen kann auf der Seite, vielleicht ist mein HTML also falsch?

Ich hoffe, Sie können helfen.

Answer 1

Ihr HTML ist in Ordnung - wird eine Checkbox anzeigen - aber ohne Text. Sie könnten etwas mit diesem Markup hinzu:

<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" >​Text here</input>​​​​​​​​​​​​​​​​​​​​​​​ 

In Ihrem JavaScript Sie eine Schließung fehlen ):

if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') { 

if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked')) { 

und ) in der letzten Zeile sein sollte:

} 
</script> 

sollte

}) 
</script> 

und Ihre Wähler ist falsch

$('form#prepay input:checkbox', 'confirm_prepay_terms') 

$('form#prepay input:checkbox[name=confirm_prepay_terms]') 

Dies verwendet die multiple attribute selector

und

sein sollte 0

$('#confirm_terms_hint').css('font-weight', 'strong'); 

sollte

$('#confirm_terms_hint').css('font-weight', 'bold'); 

font-weight hat keine strong Wert (see here) ... verwenden bold statt

in Ihrem Skript Sie true oder false aber der Code zurückkehren, ist durch nichts aufgerufen wird - es wird ausgeführt, sobald die Seite vollständig geladen ist. Sehen Sie sich die Methode .submit() in jQuery an, wenn Sie die Formularvalidierung durchführen möchten. Ein Beispiel wäre dies:

$(document).ready(function() { 
    $('#prepay').submit(function() { 
     if ($('form#prepay input:checkbox[name=confirm_prepay_terms]')) { 
       return true; 
     } else { 
      $('#confirm_terms_hint').text('Please try again - you need to check the box to move on'); 
      $('#confirm_terms_hint').css('font-weight', 'bold'); 
      return false; 
     } 
    }); 
}); 

Dies würde von der Form verhindert jetzt vorgelegt werden - wie Sie false zum Eintragen Ereignis zurückzukehren.

Fully working example here

Answer 2

Ich glaube nicht, ist es notwendig, für Sie eine CheckBox bieten, solange sie vor der Verwendung des Service diese Bedingungen akzeptieren müssen.

Sie können einfach und stressfrei selbst tun.

- Provide a link to the terms and conditions for reading 

    - Notify them that they have automatically accept this terms while proceeding.