我正在尝试使用 jquery 验证突出显示我的输入

Question

我在 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 文件。我只有表单验证。我正在使用 require 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;
});

没有任何反应，我不知道出了什么问题... 请帮我。验证有效，但突出显示不会触发。

Answer 1

The validation works, but the highlight won't trigger.

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

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

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

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

在此处阅读更多内容：

这里（见编辑 #2 和评论部分）：whosebug.com/a/8565769/594235

Answer 2

下面被覆盖的 CSS 对我有用。认为这对需要快速修复的人有帮助，

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


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

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

.valid {

}

我正在尝试使用 jquery 验证突出显示我的输入

I'm trying to highlight my inputs with jquery validate

javascript

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation