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

geoki

Γεια σας
Προσπαθώ να φέρω στα μέτρα μου αυτή τη φόρμα κάνοντας 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 αλλά δεν κατάφερα να τον βρω.
Όποια βοήθεια καλοδεχούμενη.

fafos · Στις: 01 Δεκ 2010 00:11 Θέμα:

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

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 { text-align: left; }
</style>

<script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
   rules: {
      name: "required",
      check_box1: {
         required: true,
         minlength:2
      },
      check_box2: {
         required: true,
         minlength:2
      },
      email: {
         required: true,
         email: true
      }
   },

   messages: {
      name: "Enter your lastname",
      check_box1: "Please choose 2 check boxes of group 1",
      check_box2: "Please choose 2 check boxes of group 2",
      email: {
         required: "Please enter a valid email address",
         email: "Please enter a valid email address",
         minlength: "Please enter a valid email address"
      }
   },
   // the errorPlacement has to take the table layout into account
   errorPlacement: function(error, element) {
      if ( element.is(":radio") )
         error.appendTo( element.parent().next().next() );
      else if ( element.is(":checkbox.check_box1") )
         error.insertAfter("#error_label1");
      else if ( element.is(":checkbox.check_box2") )
         error.insertAfter("#error_label2");
      else
         error.appendTo( element.parent().next() );
   },
   // set this class to error-labels to indicate valid fields
   success: function(label) {
      // set   as text for IE
      label.html(" ").addClass("checked");
   }
});

});

</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: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: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 · Στις: 01 Δεκ 2010 00:19 Θέμα:

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