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

验证有效，但突出显示不会触发。

那是因为你已经在使用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和评论部分）：stackoverflow.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验证突出我的输入

2 个答案: