How to highlight table rows if error is found - Jquery

Question

Here's the jQuery:

$(function() {
    $("#register-form").validate({
     rules: {
        fname: "required",
        surname: "required",
        middlename: "required",
       },
    messages: {
        fname: "Please enter your name",
        surname: "Please specify your surname",
        middlename: "Please specify your surname",

    },
          submitHandler: function(form) {
        form.submit();
     }

    });
});

Here's my HTML:

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"  method="post"     id="register-form">
<table width="614" border="0">
<tr style="<?php echo $errorname_css; ?>">
<td width="153">First Name</td>
<td width="175">
  <input type="text" name="fname" value="<?php echo $fname; ?>" /></td>
<td width="272">*<?php echo $fname_err; ?></td>
 </tr>
 <tr style="<?php echo $errorsurname_css; ?>">
 <td>Surname</td>   
<td><input type="text" name="surname" value="<?php echo $surname; ?>" /></td>
<td>*<?php echo $surname_err; ?></td>
</tr>
 <tr  style="<?php echo $errormidname_css; ?>">
<td>Middle Name</td>
<td><input type="text" name="middlename" value="<?php echo $middlename; ?>"  /></td>
<td>*<?php echo $middlename_err; ?></td>
</tr>
<tr  style="<?php echo $errormidname_css; ?>">
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit" /></td>
<td>&nbsp;</td>
</tr>
</table>
</form>

I would like to put the css inside the Jquery messages, but i dont know how, can someone help me with this? really appreciated, thanks :)

put somethin in a fiddle.

Jai
– Jai

2014-01-19 10:08:04 +00:00
Commented Jan 19, 2014 at 10:08 — Jai
– Jai, Commented Jan 19, 2014 at 10:08

Arun P Johny · Accepted Answer · 2014-01-19 10:10:43Z

1

You can use the hightlight/unhighlight methods

$("#register-form").validate({
    rules: {
        fname: "required",
        surname: "required",
        middlename: "required",
    },
    messages: {
        fname: "Please enter your name",
        surname: "Please specify your surname",
        middlename: "Please specify your surname",

    },
    highlight: function (element, errorClass, validClass) {
        $(element).closest('tr').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('tr').addClass(validClass).removeClass(errorClass);
    },
    submitHandler: function (form) {
        form.submit();
    }
});

then

.error {
    color: red;
}

Demo: Fiddle

answered Jan 19, 2014 at 10:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to highlight table rows if error is found - Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related