我试图用jqueryvalidation突出我的输入

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

@using (Html.BeginForm("CreatePost", "Posts", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "save-post-form" })) { 
 
 
 Post Title @Html.TextBoxFor(m => m.Title, new { @class = "form-control", @autocomplete = "off" }) @Html.ValidationMessageFor(m => m.Title, null, new { @class = "text-danger" }) 
 
 Post Description @Html.TextAreaFor(m => m.Description, new { @class = "form-control", @autocomplete = "off" }) @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" }) 
 
 Post Cover Picture @Html.TextBoxFor(m => m.PostCoverFile, new { @type = "file" }) @Html.ValidationMessageFor(m => m.PostCoverFile, null, new { @class = "text-danger" }) 
 
 
 Content 
 @Html.TextAreaFor(m => m.Content) @Html.ValidationMessageFor(m => m.Content, null, new { @class = "text-danger" }) 
 
 
 } @section scripts{  require(["createPost"], function (module) { $("#navbar-links").find("li[data-name='posts']").addClass('active'); module.load(); });  } 

这是我的js文件。 我只有表单validation。 我正在使用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; }); 

什么都没发生，我不知道出了什么问题……请帮助我。 validation有效，但突出显示不会触发。

Answer 1

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

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

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

您有两个选项来覆盖默认highlight并unhighlight highlight …

1. 从项目中删除unobtrusive-validation插件并根据需要构造.validate()方法。 为您提供完全控制但是FWIW，您将无法获得Unobtrusive Validation插件的“不显眼”特性和优势。

2. 改为在.setDefaults()方法中使用 highlight和.setDefaults()选项，然后确保此方法在 Unobtrusive调用.setDefaults() 之前到达某个地方。 要实现这一点，您可能必须确保.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 { }