Require validation show when page load first mvc 5

Abhilash J A

9y6.4k.NET

Hello everyone,

I am working on MVC5,

1) How can I show required validation when page is first loaded as here csharp corner showing like that?

2) How can move error * massage to textbox right side as below image shown?

I have tried,

CSS.

/* styles for validation helpers */
.field-validation-error {
color: red;
font-size: 15px;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid red;
}
select.input-validation-error {
border: 1px solid red;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: red;
}
.validation-summary-valid {
display: none;
}
/*End*/

Model data annotation validation.

[Required]
public string LoginName { get; set; }

And this View,

@using (Html.BeginForm("GetPremiumUserReg", "UserRegister", FormMethod.Post, new { id = "frmSubmitPremUserRegFirst" }))
{
<form role="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
@Html.ValidationMessageFor(m => m.listPartnerVM.LoginName, "*")
@Html.TextBoxFor(model => model.listPartnerVM.LoginName, new { @id = "email", @class = "form-control input-sm", @placeholder = "Email Address" })
div>
div>
div>
form>
}

Please help me...

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Asma Khalid9y ago
Accepted answer
If you want to show red asterik on load of page then do not place it inside validation message razor control instead place it like this i.e.
<div class="col-xs-12 col-sm-12 col-md-12">
    <div class="form-group row">
        @Html.TextBoxFor(model => model.listPartnerVM.LoginName, new { @id = "email", @class = "form-control input-sm col-xs-6", @placeholder = "Email Address" })
class="col-xs-4" style="color: red;">*label>
    div>
div>
In above code you will create two columns inside row and then place your content in them textbox in one and asterike in other.
Nilesh Shah9y ago
I think you need to move validation control after textbox.

i.e. @Html.ValidationMessageFor(m => m.listPartnerVM.LoginName, "*")
to be moved after
@Html.TextBoxFor(model => model.listPartnerVM.LoginName, new { @id = "email", @class = "form-control input-sm", @placeholder = "Email Address" })
@using (Html.BeginForm("GetPremiumUserReg", "UserRegister", FormMethod.Post, new { id = "frmSubmitPremUserRegFirst" }))
{
    <form role="form">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    @Html.TextBoxFor(model => model.listPartnerVM.LoginName, new { @id = "email", @class = "form-control input-sm", @placeholder = "Email Address" })
@Html.ValidationMessageFor(m => m.listPartnerVM.LoginName, "*")
                div>
            div>
        div>
      <input type="submit" value="Submit" class="btn reg-btn btn-block">
    form>
}