Positionierung der Validierungsnachricht für das mvc-Formularfeld

Question

Ich habe eine clientseitige Validierung auf die Felder in meinem Formular angewendet, damit sie nicht leer bleiben. Die Nachricht wird jedoch unterhalb der Eingabefelder angezeigt. Wie kann ich es schaffen, dass sie neben dem Feld auftauchen?

Formularfeld:

@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'); 
     } 
    }); 

}); 

Ergebnis:

Answer 1

Verwenden MVC Inbuilt Model Validation ist wie diese.

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

Ihre Klasse

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

CHTML Seite

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

Sie können ein einfaches Ereignis onChange oder blur Ereignis in der Textbox zu einer Überprüfung auf client side. hinzufügen, weisen Sie einfach ID dem ValidationMessageFor zu, wie ich oben hinzufüge.

$("#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'); 
    } 
}); 

Sie können auch Ihre Server-Side-Validierungen mit diesem JQuery event verwenden.

Erfahren Sie mehr über Using Data Annotations for Model Validation