Question

我试图显示勾选的图像，如果验证为真，如果不是X标记图像和旁边的错误消息。

刷新屏幕并单击“提交”按钮，所有字段都经过验证，显示“X”图像并在输入字段旁边显示错误消息。
输入有效数据 - 然后加载确定刻度标记图像并删除错误消息如果我删除输入的数据，则会返回错误消息，但保留勾选标记。

我需要删除刻度线并替换为“X”标记。

我正在尝试实施Milk example。

 $('#iPaySearchPolicyForm').validate({ // initialize the plugin     
    rules: {
        policyNumber: {
            required: true,
            alphanumeric: true
        },
        phLastName: {
            required: true,
            letterswithbasicpunc: true,
        },
        zip: {
            required: true,
            number: true,
        }
    },
    messages: {
        policyNumber: {
            required: "Please enter a username "
        }
    },
    errorPlacement: function (error, element) {
        //error.insertAfter(element);
        error.appendTo(element.parent("td").next("td"));
    },
    success: function (label) {
        label.html("&nbsp;").addClass("checked");
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    },
});

样式表

#iPaySearchPolicyForm label.error {
    background:url("images/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}
#iPaySearchPolicyForm label.checked {
    background:url("images/checked.gif") no-repeat 0px 0px;
}

HTML：

<table>
    <tr>
        <td>
            <label for="policyNumber" class=" control-label ">Policy Number</label>
        </td>
        <td>
            <input class="text-input form-control " type="text " name="policyNumber " id="policyNumber " />
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label for="phLastName " class=" control-label ">Last Name</label>
        </td>
        <td>
            <input class="text-input form-control " type="text " name="phLastName " id="phLastName " />
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label for="zip " class=" control-label ">Zip</label>
        </td>
        <td>
            <input class="text-input form-control " id="zip " type="text " name="zip " maxlength="5 " size="5 " />
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div>&nbsp;</div>
        </td>
        <td>
            <button type="button " name="search " id="search " class="btn btn-success ">Search Policy</button>
        </td>
    </tr>
</table>

Answer 1

Ifound问题。下面的代码需要添加到validate方法中。

highlight: function(element, errorClass) {
        $(element).parent().next().find("." + errorClass).removeClass("checked");
        },

jquery错误替换图像没有替换

1 个答案: