Question

I try to use the client side validation on a very simple example and it don’t work. I started from an existing example from the internet.

Here it is (see accepted answer): ASP .Net MVC 3 unobtrusive custom client validation

Basically, it uses this blog as solution: http://benjii.me/2010/11/credit-card-validator-attribute-for-asp-net-mvc-3/

So I started from a blank solution and would like to validate that a price is greater than a minimum.

My controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(MinPriceViewModel model)
    {
        if (!ModelState.IsValid)
            return View(model);

        return Content("Thank you very much");
    }
}

My view model:

public class MinPriceViewModel
{
    [MinPrice(MinPrice=9.99)]
    [Required]
    public double Price { get; set; }
}

The attribute for validation (client & server):

public class MinPriceAttribute : ValidationAttribute, IClientValidatable
{
    public double MinPrice { get; set; }

    public override bool IsValid(object value)
    {
        if (value == null)
            return true;

        var price = Convert.ToDouble(value);

        if (price < MinPrice)
        {
            return false;
        }

        return true;
    }

    public override string FormatErrorMessage(string name)
    {
        return "Attention le champ " + name + " ne contient pas un prix acceptable.";
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "minprice"
        };
    }
}

The view:

@model MinPriceValidation.Models.MinPriceViewModel

@{
    ViewBag.Title = "Home Page";
}

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        jQuery.validator.unobtrusive.adapters.addBool('minprice');
    }); 
</script>

@using(Html.BeginForm())
{
    @Html.LabelFor(m => m.Price)
    @Html.TextBoxFor(m => m.Price)
    @Html.ValidationMessageFor(m => m.Price)

    <input type = submit />
}

I placed a breakpoint on my post action in my controller to check whether the client or server validation occurred. When I run the solution and I type 1 and submit, the breakpoint is reached in my controller (post action) >> I concluded that client validation is never used.

I didn’t understand because I started from the basic example (credit card validation) and I know this credit card validation works in client validation (I tested it in another solution).

I’m a bit lost.

Any idea why the client validation did not work?

Thanks.

---

UPDATE

After googling a lot, I see that some people tells we need a javascript function for the client validation like this:

    jQuery.validator.addMethod("minprice", function (value, element, param) {
        // Perform tests here for client validation
        return (value>10);
    });

    jQuery.validator.unobtrusive.adapters.addBool('minprice');

When I test with this added javascript function it works but it seems strange to me that the creait card example doesn’t have any javascript function in the view for checking the credit card!!

I’m still lost.

Answer 1

When you say that you are seeing people using this with credit card and it works without the need of a custom javascript function I suppose you are reffering to the following post.

A credit card validation rule is directly built in the jquery validate plugin. That’s why you don’t need to write a custom validation function.

As far as a minprice rule is concerned, there’s no such thing, so you need to write a custom javascript function to define what minprice means.

This being said I get the feeling that you are reinventing some wheel with this attribute as you could simply do:

[Range(9.99, double.MaxValue)]
[Required]
public double Price { get; set; }

and since we are talking about prices, it is recommended to use a decimal type on your model:

[Range(9.99, double.MaxValue)]
[Required]
public decimal Price { get; set; }

Now you will get automatic client side and server side validation.