How to Put Bootstrap Validationmessagefor in Correct Position

How to put Bootstrap ValidationMessageFor in correct position?

Please check this JS Fiddle Link

HTML Code:

<!DOCTYPE html>
<body>
    <div class="container">
        <form class="form-signin form-horizontal" role="form">
             <h4 class="form-signin-heading">Please sign in</h4>

            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <input type="username" class="form-control username" placeholder="Username" required="autofocus" />
                </div>
                <div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <input type="password" class="form-control password" placeholder="Password" />
                </div>
                <div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                </div>
            </div>
        </form>
    </div>
    <!-- /container -->
    <!-- Bootstrap core JavaScript==================================================- ->
    <!-- Placed at the end of the document so the pages load faster -->
</body>

I hope this is what you want to achieve.

If you have any other issue or if not solved, then please add a comment below.

Regards D.

positioning of validation message for mvc form field

Use MVC's Inbuilt Modelstate Validation's like this.

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

Your Class

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

UPDATE

You can add a Simple onChange or blur event on the Textbox to a validation on client side., Just assign a ID to the ValidationMessageFor as i add above.

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

You can also use your Server Side validations with this JQuery event.

Learn More about Using Data Annotations for Model Validation

Styling Html.ValidationMessageFor with Bootstrap3

dont replace form-group with has-error.I have used something similar to this recently and try the following markup.

            <div class="form-group has-error">
                <div >
                    @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                </div>
                @Html.LabelFor(m => m.ConfirmPassword, new { @class = "control-label" })
                @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "help-block" })

            </div>

How to use MVC ValidationMessageFor into bootstrap-modal dialog

When you return RedirectToAction, you lose all your form data (and, therefore, all validation information). Instead of redirecting to Index, return the View with the model that was passed in.

Second, because both properties are marked as Required, you do not need to explicitly check if they are null or empty. The model is already validated before it hits your [HttpPost] method, based on the attributes you set on the model. If you return the View with this model, your validation messages will appear. This is the most basic implementation, but you can probably get away with:

[HttpPost]
public async Task<ActionResult> Login(LoginModel loginModel)
{
    if (ModelState.IsValid)
    {
        // Do work
        return RedirectToAction("Index", "Home");
    }
    // Else, if not valid, re-render the view with the updated information and display it to the user
    return View(loginModel);
}

More info on validation here

ASP.NET MVC validationMessageFor as bootstrap popover on the textbox

I suppose you should place your @data_toggle = "popover" classes not in ValidationMessageFor but in TextBoxFor and PasswordFor helper.

Then change jquery selector from $(".field-validation-error[data-toggle='popover']") to $("input[data-toggle='popover']")

At last you should change your js to get right message in x variable.

Apply class to @Html.ValidationMessageFor

I just looked this up.

So in your case try:

@Html.ValidationMessageFor(m=>m.StudentName,""/* or null or what you want the error message to be */, new { @class = "validation" })

How to apply bootstrap v4 alpha's form input validation classes with ASP.NET Razor syntax?

You can create an HtmlHelper that checks ModelState and returns an error class:

public static class HtmlHelperExtensions
{
    public static string FieldHasError(this HtmlHelper helper, string propertyName, string errorClass = "has-danger")
    {            
        if (helper.ViewData.ModelState != null && !helper.ViewData.ModelState.IsValidField(propertyName))
        {
            return errorClass;
        }
        return string.Empty;
    }

    public static string FieldHasError<TModel, TEnum>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TEnum>> expression, string errorClass = "has-danger")
    {
        var expressionString = ExpressionHelper.GetExpressionText(expression);
        var modelName = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expressionString);
        return FieldHasError(helper, modelName, errorClass);
    }
}

Simple usage:

<div class="form-group @Html.FieldHasError("Password")">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

<div class="form-group @Html.FieldHasError(m => m.Password)">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

@Html.ValidationMessageFor() custom validationMessage always shown

Have you tried the CSS from this question?

.field-validation-valid
{
    display: none;
}
.validation-summary-valid
{
    display: none;
}

How to Put Bootstrap Validationmessagefor in Correct Position