ASP.MVC client side validation does not work

Question

I am trying to validate user input on login page. I have my User mode with:

string UserName
string Password

I decided to extend my DB model with partial class:

[MetadataType(typeof(User))]
public partial class User : IUser
{

}

public interface IUser
{
    [Required(ErrorMessage = "Login is required")]
    string UserName { get; set; }

    [Required(ErrorMessage = "Password is required")]
    string Password { get; set; }
}

And my view:

   @using (Html.BeginForm("Login", "Account", FormMethod.Post))
   {
      @Html.ValidationSummary(true)      
      @Html.TextBoxFor(model => model.UserName, new { size = 30, @placeholder = "Login",    
      @class = "credential" })
      @Html.ValidationMessageFor(model => model.UserName)
      @Html.PasswordFor(model => model.Password, new { size = 30, @placeholder = 
   "Password",    @class = "credential" })
      @Html.ValidationMessageFor(model => model.Password)
   }

Instead of client validation, it makes postback and crashes on null values in model.

Following this question I added

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

to the top of view, made sure that scripts are loaded:

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

What am I missing?

Dont have any errors, It crashes in Model.Designer.cs and than does not pass through ModelState.IsValid — makambi
– makambi, Commented Jun 6, 2013 at 7:56

Sean Kenny · Accepted Answer · 2013-06-06 09:22:26Z

1

Seems to be related to the fact that you have the validation on the interface property rather than the class property.

Check the DOM element. It should look like this for the user name:

<input class="credential" data-val="true" data-val-required="Login is required" id="UserName" name="UserName" placeholder="Login" size="30" type="text" value="">

Note the data-val & data-val-required attributes. These are used by the js validation logic.

When I try using your interface property validation, these are missing.

Maybe you should use a viewmodel for this rather than the model? That way you can tailor it to the view requirements.

Edit

Actually, just make your @model declaration in the razor view to reference IUser rather than User.

@model IUser

edited Jun 6, 2013 at 9:22

answered Jun 6, 2013 at 8:23

Sean Kenny

1,62613 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

makambi Over a year ago

With model it works fine on other views, it just seems logical to add validation via interface rather than creating view model. My inputs dont have data-val and data-val-required, so yeah, you are right) Thanks Have you tried to provide interfaces validation (except my interface)? Maybe I am missing something on this

Sean Kenny Over a year ago

No I never use interface validation. The reason is that I never use models on the view. I use a ViewModel. It makes more sense to me to have the ViewModel approach as we can then introduce view logic onto it - so validation, collections that contain items for dropdowns, etc. These wouldn't really be present on the model as it is more concerned with business logic.

Collectives™ on Stack Overflow

ASP.MVC client side validation does not work

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related