为mvc表单字段定位验证消息

时间:2016-07-14 23:16:21

标签: jquery html validation razor html.beginform

我已将客户端验证应用于表单中的字段,以便它们不会保持为空。但是,消息显示在输入字段下方。我怎样才能让它们出现在场地旁边?

表单字段:

isSingleString <- function(input) {
    is.character(input) & length(input) == 1
}

Jquery的:

@using (Html.BeginForm("SaveAccount", "RxCard", FormMethod.Post, new { id = "save", enctype = "multipart/form-data" }))
{              
  <label id="lblAccountName">Account Name</label>
  @Html.TextBoxFor(model => model.Pharmacy.AccountName, new { @id = "txtAccountName", @Name = "txtAccountName", required = "required" })
  ...
}

结果:

enter image description here

1 个答案:

答案 0 :(得分:1)

使用MVC的内置模型状态验证就像这样。

[HttpPost]
public ActionResult SaveAccount(Account account)
{
    // It's return true when AccountName have some value, return false if it's NULL
   if (!ModelState.IsValid) 
   {
       // Return to the page with the Validation errorsMessages.
       return View();
   }
  return RedirectToAction("YOUR VIEW NAME");
}

您的班级

public Class Account
{
   [Required(ErrorMessage = "AccountName is required")]
   public string AccountName { get; set; }
}

Chtml Page

// I am using bootstrap for Showing your error Next to the Textbox
@using (Html.BeginForm("SaveAccount", "RxCard", FormMethod.Post, new { id = "save", enctype = "multipart/form-data" }))
{
 <div class="row-fluid">
   <div class="span3">
      <label id="lblAccountName">Account Name</label>
   </div>
   <div class="span6">
      @Html.TextBoxFor(model => model.AccountName, new { @id = "txtAccountName", @Name = "txtAccountName", required = "required" })
      @Html.ValidationMessageFor(model => model.AccountName, "", new { @id = "accountID", @class = "text-danger", style = "color:red;" })
   </div>
 </div>
}
  

更新

您可以在文本框中添加简单的onChangeblur事件,以便client side.上的验证,只需将ID分配给ValidationMessageFor作为我添加上面。

$("#AccountName").change(function ()
 {
     // change this with your own condition..
     if ($("#AccountName").val() != 0)
     {
         $("#accountID").text("This field is not correct");
         $("#accountID").attr('class', 'field-validation-error');
     }
 });

您还可以将此服务器端验证与此JQuery event一起使用。

详细了解Using Data Annotations for Model Validation