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

Posted 2023-05-09

【中文标题】我正在尝试使用 jquery validate 突出显示我的输入

【英文标题】：I'm trying to highlight my inputs with 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;
);

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

【参考方案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() 中输入的任何内容都会影响页面上的所有表单。

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

在这里（参见编辑#2 和 cmets 部分）：***.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