JQuery Required TextBox Validation and Error Message in MVC

Question

I apologize in advance if this seems like a stupid question but after doing quite a bit of searching around I either can't put the right pieces together or simply haven't found the right answer. Anyways, I've got this model:

public class Resort
{
    public int ID { get; set; }
    public String Name { get; set; }
    public int BlackDiamond { get; set; }
    public int BlueSquare { get; set; }
    public int GreenCircle { get; set; }
    public int TerrainPark { get; set; }
}

And I've got a view that creates TextBoxes as the input for each of those variables. What I need to do is set up some JQuery validation to ensure that each TextBox has a value in it, and more specifically that the TextBoxes for the int has numbers in it.

After doing a little research I'm just not sure how I can even go about setting up the script for the view or if I should rely on Data Annotations in the model?? Any help is appreciated even if it is simply to point me in the right direction of research, I am here to learn. Thank you.

Answer 1

If it's a required field, add the RequiredAttribute to the field:

[Required]
public int BlackDiamond { get; set; }

If you also want a custom message, add it to the attribute:

[Required(ErrorMessage="Please enter a number")]
public int BlackDiamond { get; set; }

If you want built-in jQuery validation, make sure you use the strongly-typed helper:

@Html.TextBoxFor(m => m.BlackDiamond) // you can also use EditorFor

You will need to also include script references to the UnobtrusiveValidation and jQuery Validate plugins to get the automatic validation.

Just FYI, this seems like a good place to start, if you are unfamiliar with validation in MVC: http://msdn.microsoft.com/en-us/VS2010TrainingCourse_ASPNETMVC3FormsandValidation

EDIT: Just to make this answer a bit more complete, as noted in the comments: to see the error messages associated with each control, you need to add the validation helpers: @Html.ValidationMessageFor(m => m.BlackDiamond)