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

Question

我对表单中的字段应用了客户端验证，这样它们就不会留空。但是，该消息显示在输入字段下方。我怎样才能让他们出现在场地旁边？

表单域：

@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" })
  ...
}

Jquery:

$(document).ready(function () {

    $('#save').validate({
        onchange: function (element) {
            this.element(element);
            console.log('onchange fired');
        },
        onfocusout: function (element) {
            this.element(element);
            console.log('onfocusout fired');
        }
    });

});

结果：

Answer 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");
}

你的Class

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

Chtml 页面

// 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>
}

UPDATE

您可以将文本框上的简单 onChange 或 blur 事件添加到 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

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

positioning of validation message for mvc form field

html

validation

jquery

html.beginform

razor