Question

我有以下表格

<form id="myform" method="post" action="#">
    <div class="fields">
        <fieldset class="ui-widget ui-widget-content ui-corner-all">
            <legend class="ui-widget ui-widget-header ui-corner-all">&nbsp;Customer properties&nbsp;</legend>
            <input type="hidden" id="CustomerID" name="CustomerID"  value="${CustomerID}" />
            <br />
            <table width="100%" border="0" cellpadding="3" cellspacing="1">
            <tr valign="top">
                <td><label for="Code">Customer Code</label></td>
                <td><input type="text" id="Code" name="Code" value="${Code}" class="ui-widget-content" style="width:140px" /></td>
            </tr>
            <tr valign="top">
                <td><label for="CustomerName">Name</label></td>
                <td><textarea id="CustomerName" rows="2" cols="40" name="CustomerName" class="ui-widget-content">${CustomerName}</textarea></td>
            </tr>
            ...
            </table>
            <br />
        </fieldset>
    </div>
    <div style="text-align:right; padding: 8px 0px 0px 0px;">
        <input type="submit" id="btnSave" name="btnSave" class="button" value="Save" />
        <input type="button" id="btnCancel" name="btnCancel" class="button" value="Cancel" />
    </div>
</form>

我通过以下代码应用jQuery验证

$('#myform').validate({
    errorElement: 'span',
    errorPlacement: function (error, element) {
        error.html($('<img alt="" src="error.png" />').attr('title', error.html())).insertAfter(element);
    },
    rules: {
        ...
    },
    messages: {
        ...
    },
    submitHandler: function (form) {
        saveCustomer(form);
    }
});

此代码在第一次执行时（当我按下提交按钮时）非常好，并且图像会在输入文本后立即显示。无论如何，当我选择另一个编辑时，图像消失，我可以再次看到编辑周围的文字。我做错了什么？

Answer 1

请参阅here - 您可以使用errorElement选项创建自定义错误显示，
invalidHandler方法（我认为）禁用组消息部分您可以使用errorPlacement来控制错误的显示方式（未经测试的示例）：

$("#myform").validate({
  errorPlacement: function(error, element) {
       element.append('<img source=".." title="' + error.text() +'" />');
   }
 })

这应创建一个包含错误消息的工具提示的图像。

自定义jQuery验证消息和标记

1 个答案: