要在最后一个 TD 上显示的 jQuery 验证消息

Question

jQuery

rules:{
    gender: {
        required: true
    },
},
messages:{
    gender: {
        required: "Please specify your gender"
    },
},
errorPlacement: function (error, element) {
    if (element.attr("type") == "radio") {
        error.insertBefore(element.siblings('input[type="radio"][name="' + element.attr('name') + '"]:last'));
    } else {
        error.insertAfter(element);
    }
}

.HTML

<table cellpadding="6" cellspacing="0">
    <tr>
        <td style="color:rgba(0,0,0,0.5); font-weight:300">Gender*</td>
        <td>
            <input type="radio" id="radio01" name="gender" value="male"/>Male
            <input type="radio" id="radio02" name="gender" value="female"/>Female
        </td>
    </tr>
</table>

我在单选按钮之间收到错误消息，破坏了我的整个布局！我需要它在第三个 td 中入例如：Gender .Male .Female "This field is required"

Answer 1

您可以创建其他列来显示错误消息。

errorPlacement: function (error, element) {
    var html = "<td>" + error + "</td>";
    html.appendTo(element.parent());
}

Answer 2

rules:{
   gender: {
       required: true
   },
},
messages:{
    gender: {
        required: "Please specify your gender"
    },
},
errorElement: 'span',
highlight: function (element, errorClass) {
    $('span.error').show();
}
<table cellpadding="6" cellspacing="0">
    <tr>
        <td style="color:rgba(0,0,0,0.5); font-weight:300">Gender*</td>
        <td>
            <input type="radio" id="radio01" name="gender" value="male"/>Male
            <input type="radio" id="radio02" name="gender" value="female"/>Female
        </td>
        <td>
            <span style="display:none"></span>
        </td>
    </tr>
</table>

可以使用此 span 元素，也可以添加类来突出显示错误。