更改MVC驗證使用

-1

我有我的CSHTML頁第二碼：更改MVC驗證使用

@using (Html.BeginForm()) 
{ 
    <div id="login"> 
     @Html.ValidationSummary(true, SignIn_cshtml.SignInWasUnsuccessful) 
     <p>Login to menu</p> 
     <div> 
      @Html.TextBoxFor(m => m.UserName, new { id="input_name", placeholder="User Name" }) 
      @Html.ValidationMessageFor(m => m.UserName) 
     </div>    
     &nbsp; 
     <div> 
      @Html.PasswordFor(m => m.Password, new { id="input_pwd", placeholder="Password" }) 
      @Html.ValidationMessageFor(m => m.Password) 
     </div>    
     <div> 
      @Html.CheckBoxFor(m => m.Enable) 
      @Html.LabelFor(m => m.Enable) 
     </div> 
     <div> 
      <input type="image" src="~/Content/images/LoginButton.png" value="@SignIn_cshtml.SignIn"/> 
     </div> 
    </div> 
} 
@section scripts 
{ 
<script type="text/javascript"> 
    $(function() { 
     $("#UserName").focus();  
    }); 

    $(document).ready(function() { 

     function add() { 
      if ($(this).val() === '') { 
       $(this).val($(this).attr('placeholder')).addClass('placeholder'); 
      } 
     } 

     function remove() { 
      if ($(this).val() === $(this).attr('placeholder')) { 
       $(this).val('').removeClass('placeholder'); 
      } 
     } 

     if (!('placeholder' in $('<input>')[0])) { 

      $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); 

      $('form').submit(function() { 
       $(this).find('input[placeholder], textarea[placeholder]').each(remove); 
      }); 
     } 
    }); 
</script> 
}

一切工作正常。如果用戶名或密碼不正確，我會在他們的文本框下收到消息。

問題是現在我需要改變它。而不是驗證用戶名或密碼的消息，我需要將他們的文本顏色更改爲紅色（直到我猜測新的文本框焦點）。此外，驗證摘要應移至底部，外部登錄div（本身），並應以某種樣式顯示。聽起來不那麼難（用JavaScript），但事情是，我不能改變驗證。所有驗證消息都應該存在。

據我所知，我應該以某種方式運行JavaScript，它將顯示div與驗證摘要，並且直到新焦點，應該將文本框值從黑色重新顏色變爲紅色，但是如何運行此腳本？我的意思是，在發生用戶名或密碼錯誤的時刻？

P.S對不起，我的英語不好。

來源

2014-10-01 Olegs Jasjko

我希望我明白你想要做的正確，但你不需要任何自定義驗證腳本。包括內置的客戶端JavaScript腳本中的部分用：DataAnnotations

@Scripts.Render("~/bundles/jqueryval")

標記你的模型類的屬性，如：

using System.ComponentModel.DataAnnotations; 
public class LoginModel { 
    [DataType(DataType.Text, ErrorMessage="Invalid entry."), 
    MaxLength(100, ErrorMessage="Username must be 100 characters or less."), 
    Required(AllowEmptyStrings=false, ErrorMessage="UserName is required.")] 
    public string UserName { get; set; } 
    ... 
}

至於你的驗證摘要，你可以在任何地方移動它你要。要添加一些外觀和感覺只使用過載：

@if (!ViewData.ModelState.IsValid) { 
    @Html.ValidationSummary(true, "Please fix the following errors:", new { @class = "alert alert-danger"}) 
}

來源

2014-10-01 12:55:27

當一個文本框有一個驗證錯誤，這將有CSS類input-validation-error添加到它。所以，如果你想在文本框中的紅色文字，只發現（這將是在的site.css默認MVC項目），並將其更改爲：

input.input-validation-error { 
    border: 1px solid #b94a48; 
    color:#FF0000; 
}

當此修正，班會自動刪除並將文本改回黑色。

要將驗證摘要移到登錄div之外，只需移動@Html.ValidationSummary()即可。您可以通過更改.validation-summary-errors（也在Site.css中）的css來設置它的樣式。

來源

2014-10-01 12:56:27 Rhumborl

有趣的想法......但關於.input驗證錯誤。我不能改變它，因爲它使用的另一個頁面。我自己的.input-validation-error被Site.css覆蓋。有沒有辦法首先從佈局頁面採取樣式？此外，關於div可見性的問題仍然存在。 – 2014-10-01 13:27:50

@OlegsJasjko檢查我的答案，以添加您自己的類來覆蓋輸入驗證錯誤樣式 – 2014-10-01 20:54:53

更改MVC驗證使用

回答

相關問題