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.

Tieson T. · Accepted Answer · 2013-02-08 02:35:50Z

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)

edited Feb 8, 2013 at 2:35

answered Jan 20, 2013 at 18:47

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

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

4 Comments

Jfabs Over a year ago

These ones right: <script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="~/Scripts/jquery.validate.js" type="text/javascript"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

Jfabs Over a year ago

So this does work, it stops me from being able to submit anything that is empty but my ErrorMessages don't show up at all... Is there supposed to be anything else in the View that forces the ErrorMessages through?

Tieson T. Over a year ago

@Jared To see the error messages, you need to add the validation helpers: @Html.ValidationMessageFor(m => m.BlackDiamond), for instance.

Jfabs Over a year ago

Ahhh, I was thinking that might be the problem. Thank you again!

Collectives™ on Stack Overflow

JQuery Required TextBox Validation and Error Message in MVC

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related