Validating MVC3 Simple Form

Question

I am new to MVC3 and I will check the form for the first time. I saw some validation patterns using jQuery and using Model.IsValid, but I don't know if this is my case.

I use @ Html.TextBox and @ Html.ValidationMessage, I see that I need to place two jQuery lines in my document to check:

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

And I saw that many only use validation with jQuery, but I could not understand how this works. So, could you give me a sample validation code for Razor View with jQuery (if necessary) and for the controller? Since I do not use TextBoxFor, I believe that I can not use validation only with Datannotations in the Model class.

The form I have to check is:

 @Html.TextBox("user", "User:") @Html.TextBox("email", "Email:") <!-- with validation of email string --> @Html.Password("password") @Html.Password("passwordConfirm") <!-- with validation if 2 password strings match --> 

Answer 1

jquery.validate.unobtrusive.min.js script works in conjunction with data annotations posted on your model properties. These validator attributes are then translated by the Html helpers to emit the HTML5 data attributes used by the script. Unless you have a model decorated with validation attributes, you cannot use this script.

However, you can still have a model with validation attributes on it and still use a TextBox instead of a TextBoxFor. That would be completely stupid and pointless, but you can do it:

 public class MyViewModel { [Required] public string MyProperty { get; set; } } 

and then when you use one of the helpers inside the form , the validation attributes will be selected:

 @model MyViewModel @using (Html.BeginForm()) { @Html.TextBox("MyProperty") } 

If you don’t have a view model (you don’t know why you don’t have a view model, as this contradicts the recommendations that I am preaching), you can manually enable the check. In this case, you simply remove the jquery.validate.unobtrusive script and use the jQuery kernel authentication plugin:

 $(function() { $('#id_of_your_form').validate({ rules: { MyProperty: { required: true } }, messages: { MyProperty: { required: 'Please enter a value for MyProperty' } } }); }); 

Obviously, the recommended solution is to use a view model and strongly typed helpers:

 public class RegisterViewModel { public string User { get; set; } [DataType(DataType.EmailAddress)] [Email] // taken from Scott Gu blog post: http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx public string Email { get; set; } public string Password { get; set; } [Compare("Password")] public string PasswordConfirm { get; set; } } 

and then, in your opinion:

 @model RegisterViewModel <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) { <div> @Html.LabelFor(x => x.User) @Html.EditorFor(x => x.User) @Html.ValidationMessageFor(x => x.User) </div> <div> @Html.LabelFor(x => x.Email) @Html.EditorFor(x => x.Email) @Html.ValidationMessageFor(x => x.Email) </div> <div> @Html.LabelFor(x => x.Password) @Html.PasswordFor(x => x.Password) @Html.ValidationMessageFor(x => x.Password) </div> <div> @Html.LabelFor(x => x.PasswordConfirm) @Html.PasswordFor(x => x.PasswordConfirm) @Html.ValidationMessageFor(x => x.PasswordConfirm) </div> <button type="submit">Register</button> }