(jquery validation) εμφάνιση του error message

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

(jquery validation) εμφάνιση του error message

Δημοσίευση από geoki » 30 Νοέμ 2010 22:53

Γεια σας
Προσπαθώ να φέρω στα μέτρα μου αυτή τη φόρμα κάνοντας validation με jquery.
Το πρόβλημά μου είναι ότι το error message του δευτέρου group των checkbox μου εμφανίζεται μαζί με αυτό του πρώτου group.
Εικόνα

Ενώ το σωστό είναι
Εικόνα

Ο κωδικας του jquery είναι

Κώδικας: Επιλογή όλων

		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.insertAfter("#error_label1");
			else
				error.appendTo( element.parent().next() );
		},
Εδώ προφανώς με κάποιο τρόπο πρέπει να δηλωθεί η τοποθεσία εμφάνισης του κάθε error αλλά δεν κατάφερα να τον βρω.
Όποια βοήθεια καλοδεχούμενη.
Συνημμένα
1.jpg
(19.33 KiB) Μεταφορτώθηκε 340 φορές
2.jpg

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

(jquery validation) εμφάνιση του error message

Δημοσίευση από fafos » 30 Νοέμ 2010 23:11

thn maurh th jquery thn exeis katamperdepsei me ta id ekei mesa.. :lol:

sta check boxes dose classes (class="check_box1" gia to proto set kai class="check_box2" gia to deutero)

meta mesa sto script dose na psaksei gia checkboxes se sydyasmo me thn class:

Κώδικας: Επιλογή όλων

			else if ( element.is(":checkbox.check_box1") )
				error.insertAfter("#error_label1");
			else if ( element.is(":checkbox.check_box2") )
				error.insertAfter("#error_label2");

kai oloklhromeno:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">

<link rel="stylesheet" type="text/css" media="screen" href="jquery-validate2/milk.css" />

<script src="jquery-validate2/jquery.js" type="text/javascript"></script>
<script src="jquery-validate2/jquery.validate.js" type="text/javascript"></script>

<style type="text/css">
	pre &#123; text-align&#58; left; &#125;
</style>



<script id="demo" type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	// validate signup form on keyup and submit
	var validator = $&#40;"#signupform"&#41;.validate&#40;&#123;
		rules&#58; &#123;
			name&#58; "required",
			check_box1&#58; &#123;
				required&#58; true,
				minlength&#58;2
			&#125;,		
			check_box2&#58; &#123;
				required&#58; true,
				minlength&#58;2
			&#125;,		
			email&#58; &#123;
				required&#58; true,
				email&#58; true
			&#125;
		&#125;,
		
		messages&#58; &#123;
			name&#58; "Enter your lastname",
			check_box1&#58; "Please choose 2 check boxes of group 1",
			check_box2&#58; "Please choose 2 check boxes of group 2",
			email&#58; &#123;
				required&#58; "Please enter a valid email address",
				email&#58; "Please enter a valid email address",
				minlength&#58; "Please enter a valid email address"
			&#125;
		&#125;,
		// the errorPlacement has to take the table layout into account
		errorPlacement&#58; function&#40;error, element&#41; &#123;
			if &#40; element.is&#40;"&#58;radio"&#41; &#41;
				error.appendTo&#40; element.parent&#40;&#41;.next&#40;&#41;.next&#40;&#41; &#41;;
			else if &#40; element.is&#40;"&#58;checkbox.check_box1"&#41; &#41;
				error.insertAfter&#40;"#error_label1"&#41;;
			else if &#40; element.is&#40;"&#58;checkbox.check_box2"&#41; &#41;
				error.insertAfter&#40;"#error_label2"&#41;;
			else
				error.appendTo&#40; element.parent&#40;&#41;.next&#40;&#41; &#41;;
		&#125;,
		// set this class to error-labels to indicate valid fields
		success&#58; function&#40;label&#41; &#123;
			// set &nbsp; as text for IE
			label.html&#40;"&nbsp;"&#41;.addClass&#40;"checked"&#41;;
		&#125;
	&#125;&#41;;
	
&#125;&#41;;

</script>




<title></title>
</head>


<form id="signupform" autocomplete="off" method="get" action="">

<table>
<tr>
	<td class="label"><label id="lname" for="name">Name</label></td>
	<td class="field"><input id="name" name="name" type="text" value="" maxlength="100" /></td>

	<td class="status"></td>
</tr>
<tr>
     <td class="label"><label id="lphone" for="phone">Phone</label></td>
     <td class="field"><input id="phone" name="phone" type="text" value="" maxlength="100" /></td>
	 <td class="status"></td>
</tr>
<tr>
     <td class="label"><label id="lemail" for="email">E-mail</label></td>
     <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>

     <td class="status"></td>
</tr>
<tr>
     <td class="label"><label id="laddress" for="address">Address</label></td>
     <td class="field"><input id="address" name="address" type="text" maxlength="50" value="" /></td>
     <td class="status"></td>
</tr>





<tr>
     <td class="label"><label id="lmarka" for="marka">Marka</label></td>
     <td class="field"><input id="marka" name="marka" type="text" maxlength="50" value="" /></td>
     <td class="status"></td>
</tr>
<tr>
     <td class="label"><label id="ltype" for="type">Type</label></td>
     <td class="field"><input id="type" name="type" type="text" maxlength="50" value="" /></td>
     <td class="status"></td>

</tr>
<tr>
     <td class="label"><label id="lkil" for="kil">Kil</label></td>
     <td class="field"><input id="kil" name="kil" type="text" maxlength="50" value="" /></td>
     <td class="status"></td>
</tr>






<tr>

     <td class="label"><label>Group 1</label></td>
     <td class="field" colspan="2">
     
     <input class="check_box1" type="checkbox" name="check_box1"  />
     <label id="lcheck_box" for="check_box">Service 1</label><label style="padding-left&#58;33" id="error_label1" ></label>
     
<br />
     <input class="check_box1" type="checkbox" name="check_box1" />
     <label id="lcheck_box" for="check_box">Service 2</label>

     
<br />
     <input class="check_box1" type="checkbox" name="check_box1" />
     <label id="lcheck_box" for="check_box">Service 3</label>
     
     </td>
</tr>



<tr>
     <td class="label"><label>Group 2</label></td>

     <td class="field" colspan="2">
     
     <input class="check_box2" type="checkbox" name="check_box2"  />
     <label id="lcheck_box" for="check_box">Service 1</label><label style="padding-left&#58;33" id="error_label2" ></label>
     
<br />
     <input class="check_box2" type="checkbox" name="check_box2" />
     <label id="lcheck_box" for="check_box">Service 2</label>
     
<br />
     <input class="check_box2" type="checkbox" name="check_box2" />

     <label id="lcheck_box" for="check_box">Service 3</label>
     
     </td>
</tr>





<tr>
     <td class="label"></td>
     <td class="field" colspan="2">
     <input id="signupsubmit" name="signup" type="submit" value="Sent" />

     </td>
</tr>

</table>
</form>

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

(jquery validation) εμφάνιση του error message

Δημοσίευση από geoki » 30 Νοέμ 2010 23:19

Καλά fafos απάντηση αστραπή.
Να σαι καλά. Ήρθε κι έστρωσε η φόρμα.
Ευχαριστώ πολύ.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες