使用自定義樣式的jQuery unobstrusive驗證.NET MVC 5

我有一個HTML類似這樣的標記：使用自定義樣式的jQuery unobstrusive驗證.NET MVC 5

<div class="col-sm-6"> 
     <div class="main-contact"> 
      <form id="registerForm"> 
       @Html.TextBoxFor(model=>model.FirstName, new { @placeholder="First Name" }) 
       @Html.ValidationMessageFor(model=>model.FirstName) 
       @Html.TextBoxFor(model => model.LastName, new { @placeholder = "Last Name" }) 
       @Html.ValidationMessageFor(model => model.LastName) 
       @Html.TextBoxFor(model => model.Email, new { @placeholder = "Email" }) 
       @Html.ValidationMessageFor(model => model.Email) 
       @Html.TextBoxFor(model => model.Password, new { @placeholder = "Password" }) 
       @Html.ValidationMessageFor(model => model.Password) 
       @Html.TextBoxFor(model => model.RepeatPassword, new { @placeholder = "Repeat Password" }) 
       @Html.ValidationMessageFor(model => model.RepeatPassword) 
       @Html.DropDownListFor(model => model.selectedCountryId, Model.Countries, "-- Select a country --") 
       @Html.ValidationMessageFor(model => model.selectedCountryId) 

       <button type="submit">Send message</button> 
      </form> 
     </div> 
    </div>

和使用這些庫來激活jQuery的unobstrusive驗證：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

而且現在我m試圖添加一些風格的文本框本身和驗證消息時，表單無效......？

我想使用引導程序的默認方式來顯示消息並在文本框本身添加紅色輝光...或者，如果你們中的一些人有一些自定義的CSS想分享在這裏？

我該如何將默認引導樣式應用於此或添加一些自定義樣式？

來源

2017-07-09 User987

添加對以下CDN的引用並修改您的表單以使用引導類來更改UI外觀。

!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

這樣的事情，

<div class="form-group"> 
     @Html.LabelFor(m => m.Name) 
     @Html.TextBoxFor(m => m.Name, new { @class = "form-control"}) 
     @Html.ValidationMessageFor(m => m.Name) 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Description) 
     @Html.TextAreaFor(m => m.Description, new { @class = "form-control", placeholder = "eg: details about the deal..." }) 
     @Html.ValidationMessageFor(m => m.Description) 
    </div> 
<button type="submit" class="btn btn-primary btn-lg">Submit</button>

下面表格組，表單控件類是從Bootstrap

你也可以參考這個link看你需要使用什麼類不同形式的元素

來源

2017-07-09 11:43:49

使用自定義樣式的jQuery unobstrusive驗證.NET MVC 5

回答

相關問題