jquery - 如果发现错误如何突出显示表行 - Jquery

Question

这是 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();
     }

    });
});

这是我的 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>

我想将 css 放入 Jquery 消息中，但我不知道该怎么做，有人可以帮助我吗？非常感谢，谢谢:)

Answer 1

您可以使用高亮/取消高亮方法

$("#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();
    }
});

然后

.error {
    color: red;
}

演示:Fiddle