我試圖用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文件。我只有表單驗證。 我使用要求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

驗證有效，但高亮不會觸發。

這是因爲您已經將不顯眼驗證插件用作ASP的一部分。因此，Unobtrusive Validation會自動構建並調用.validate()方法。這意味着你的實例.validate()總是被忽略。 （根據jQuery Validate的設計，.validate()方法只能調用一次作爲插件在窗體上的初始化，並且任何後續調用總是被忽略。）。

換句話說，一旦你在窗體上調用了.validate()（初始化插件），這些選項就被鎖定了，並且不能通過再次調用.validate()來動態改變。

你有兩個選擇爲忽略默認highlight和unhighlight ...

1. 從您的項目中刪除unobtrusive-validation插件和構建.validate()方法，你的願望。給你完全控制但FWIW，你不會得到Unobtrusive Validation插件的「不顯眼」特性和好處。

2. 把你highlight和unhighlight選項中the .setDefaults() method代替，然後可以肯定這種方法去某處前不顯眼的通話.validate()。爲了實現這一點，您可能必須確保.setDefaults()不在任何DOM就緒事件處理程序中。請記住，您在.setDefaults()中放置的任何內容都將影響頁面上的全部表單。

在這裏閱讀更多：stackoverflow.com/a/40899630/594235

和這裏（見編輯＃2和評論部分）：stackoverflow.com/a/8565769/594235