我正在尝试使用 jquery validate 突出显示我的输入答案

【问题标题】：I'm trying to highlight my inputs with jquery validate我正在尝试使用 jquery validate 突出显示我的输入
【发布时间】：2017-09-18 11:34:23
【问题描述】：

我在 mvc 中工作。这是我的看法：

@using (Html.BeginForm("CreatePost", "Posts", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "save-post-form" }))
{
<div class="row">
    <div class="col-xs-5" id="post-details-div">
        <div class="form-group">
            <label>Post Title</label>
            @Html.TextBoxFor(m => m.Title, new { @class = "form-control", @autocomplete = "off" })
            @Html.ValidationMessageFor(m => m.Title, null, new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <label>Post Description</label>
            @Html.TextAreaFor(m => m.Description, new { @class = "form-control", @autocomplete = "off" })
            @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <label>Post Cover Picture</label>
            @Html.TextBoxFor(m => m.PostCoverFile, new { @type = "file" })
            @Html.ValidationMessageFor(m => m.PostCoverFile, null, new { @class = "text-danger" })
        </div>
    </div>

    <div id="post-content-div">
        <label>Content</label>
        <div class="form-group">
            @Html.TextAreaFor(m => m.Content)
            @Html.ValidationMessageFor(m => m.Content, null, new { @class = "text-danger" })
        </div>
    </div>
</div>
}

@section scripts{

<script>
    require(["createPost"], function (module) {
        $("#navbar-links").find("li[data-name='posts']").addClass('active');
        module.load();

    });
</script>
}

这是我的 js 文件。我只有表单验证。我正在使用需要 js：

define(["jquery", "mainModule", "ckeditor", "jqueryValidateUnobtrusive", "bootstrapTagsInput", "typeAhead"], function ($, module, CKEDITOR) {
    var bind = function () {
        $(document).ready(function () {

        console.log("ready");
        $('#save-post-form').validate({
            highlight: function (element) {
                $(element).addClass('error');
                $(element).removeClass('valid');
                console.log("ceva");
            },
            unhighlight: function (element) {
                $(element).removeClass('error');
                $(element).addClass('valid');
                console.log("ceva");
            }
        });
    });
var createPostPage = {
    load: function () {
        bind();
    }
}

return createPostPage;
});

什么也没发生，我不知道出了什么问题... 请帮我。验证有效，但高亮不会触发。

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-validate unobtrusive-validation

【解决方案1】：

验证有效，但高亮不会触发。

那是因为您已经将 unobtrusive-validation 插件用作 ASP 的一部分。因此，Unobtrusive Validation 会自动构造并调用.validate() 方法。这意味着您的 .validate() 实例总是被忽略。 （根据 jQuery Validate 的设计，.validate() 方法只能作为插件在表单上的初始化调用一次，并且任何后续调用都会被忽略。）。

换句话说，一旦你在表单上调用.validate()（初始化插件），选项就会被锁定，不能通过再次调用.validate()来动态更改。

您有两个选项可以覆盖默认的 highlight 和 unhighlight...

从您的项目中删除unobtrusive-validation 插件并根据需要构建.validate() 方法。为您提供完全控制权，但 FWIW，您将无法获得 Unobtrusive Validation 插件的“不显眼”功能和优势。
将您的highlight 和unhighlight 选项放在the .setDefaults() method 中，然后确保此方法适用于某个地方之前不显眼的调用.validate() .要实现这一点，您可能必须确保.setDefaults() 不在任何 DOM 就绪事件处理程序中。请记住，您在 .setDefaults() 中输入的任何内容都会影响页面上的所有表单。

在此处阅读更多信息：stackoverflow.com/a/40899630/594235

在这里（参见编辑#2 和 cmets 部分）：stackoverflow.com/a/8565769/594235

【讨论】：

@AndreiB，不客气。如果它解决了问题，请“接受”这个答案。
@AndreiB，单击我的答案旁边左上角的复选标记。谢谢。

【解决方案2】：

以下覆盖的 CSS 对我有用。认为这对那些需要快速修复的人会有所帮助，

.field-validation-error {
    color: #ff0000;
}


.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.valid {

}

【讨论】：