from validate mit jquery

[piepenimohr]

Hallo,

habe hier ein kleines Formular, weclhes ich mit jQuery validiere. Soweit klappt das auch recht gut.
Nun habe ich in dem Formular noch eine checkbox (Newsletter Anmeldung) als toggle Funktion. Nach dem klicken erscheint die Datenschutzerklärung, die (jetzt meine Frage) unbedingt mit geprüft werden sollte. Nach dem Motto, klicke ich auf Newsletter (checkbox) MUSS ich die Datenschutzerklärung UNBEDINGT klicken (anhacken).

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
/* die toggle funktion für die datenschutz_box*/
$(function() {
   $('#newsletter_box').click(function(){
		
		$('div#datenschutz_box').toggle();
		
		$("#datenschutz_box_box").removeAttr("checked"); // uncheck the checkbox or radio
/* funktion zum validieren der datenschuz checkbox WENN newsletter checkbox AKTIV*/
		$("#contact-form").validate({
			submitHandler:function(form) {
				SubmittingForm();
			},
			rules: {
				JA_datenschutz: "required",		// simple rule, converted to {required:true}
			}
		});

   });
});
</script>
  <script type="text/javascript">
		SubmittingForm=function() {
			alert("The form has been validated.");
		}

		$(document).ready(function() {
			$("#contact-form").validate({
				submitHandler:function(form) {
					SubmittingForm();
				},
				rules: {
					Vorname: "required",		// simple rule, converted to {required:true}
					Nachname: "required",		// simple rule, converted to {required:true}
					Infopaket_JA: "required",		// simple rule, converted to {required:true}
				//	JA_datenschutz: "required",		// simple rule, converted to {required:true}
					Strasse: "required",		// simple rule, converted to {required:true}
					PLZ: "required",		// simple rule, converted to {required:true}
					Ort: "required",		// simple rule, converted to {required:true}
					email: {				// compound rule
						required: true,
						email: true
					}
				}
			});
		});

		jQuery.validator.addMethod(
			"selectNone",
			function(value, element) {
				if (element.value == "none")
				{
					return false;
				}
				else return true;
			},
			"Please select an option."
		);

		$(document).ready(function() {
			$("#contact-form").validate({
				submitHandler:function(form) {
					SubmittingForm();
				},
				rules: {
					sport: {
						selectNone: true
					}
				}
			});
		});
	</script>

das From

<form id="contact-form" method="post" action="">
  <h1>Newsletter</h1>
    <div class="row">
			<input type="checkbox" name="JA_newsletter" id="newsletter_box" />
			<p>Ich m&ouml;chte den <strong>Newsletter von XY</strong> mit steht aktuelle Informationen erhalten.</p>

	</div>
<div style="display:none;" id="datenschutz_box">
    <div class="row">
			<input type="checkbox" name="JA_datenschutz" id="datenschutz_box_box" />
			<p>Ich habe die <a href="datenschutzerklaerung.html" target="_blank" title="Datenschutzerkl&auml;rung">Datenschutzerkl&auml;rung</a> gelesen und bin damit einverstanden.</p>

	</div>
</div>
<label for="E-Mail"><strong>E-Mail: </strong></label><input name="EMail" id="EMail" type="text" size="25" tabindex="10" class="input-text" />
<input class="submit" type="submit" value="Submit">
</div>
</form>

aussehen ist hier gerade zweitrangig

 

[Zack]

Hi,

formvalidation hab ich ähnlich auch geschrieben: http://labs.aranox.de/formValidation/

Machs doch einfach mit Conditions:

// wenn newsletter_box gecheckt ist
if($("#newsletter_box").is(':checked')){
     // muss auch datenschautz akzeptiert werden.
     if($("#datenschutz_box_box").is(':checked')){
          // weiter
     }else{
          // fehler
     }
}

Aussehen ist relativ wichtig, zumindest Codeformat, dass macht anderen Leuten den Code auch lesbar.