mvc3 Custom validation attribute doesn't validate on client side

Question

Created a custom validation attribute and I would like to get it to work on client side as well. Here is the Model class

public class CreditCardAttribute : ValidationAttribute, IClientValidatable
    {
        public override bool IsValid(object value)
        {
            var number = Convert.ToString(value);
            return IsValidNumber(number);
        }
        private bool IsValidNumber(string number)
        {
            int[] DELTAS = new int[] { 0, 1, 2, 3, 4, -4, -3, -2, -1, 0 };
            int checksum = 0;
            char[] chars = number.ToCharArray();
            for (int i = chars.Length - 1; i > -1; i--)
            {
                int j = ((int)chars[i]) - 48;
                checksum += j;
                if (((i - chars.Length) % 2) == 0)
                    checksum += DELTAS[j];
            }

            return ((checksum % 10) == 0);
        }

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

        }
    }

jQuery:

jQuery.validator.addMethod('CreditCardtest', function (value, element, params)
    {
    return false;
    });


    jQuery.validator.unobtrusive.adapters.add('CreditCard', { }, function(options){
        options.rules['CreditCardtest'] = true;
        options.messages['CreditCardtest'] = options.message;
    });

I am not sure what should go to CreditCardTest, do I want to rewrite what I have in Model to here?

Thank you

You really wanna code a credit card validation algorithm in javascript? Not that it is a secret, but seems completely useless to me. — Darin Dimitrov
– Darin Dimitrov, Commented Feb 14, 2012 at 22:20
Are you asking about how to translate your C# code to javascript? — Darin Dimitrov
– Darin Dimitrov, Commented Feb 14, 2012 at 22:33
Ok so here is what happened now, I added IClientValidatable to the model and I completely removed the jquery code and it works. I thought it needs the jQuery part to work? — bobek
– bobek, Commented Feb 14, 2012 at 22:37
what works? If you removed the jQuery code what client side validation do you expect to happen? — Darin Dimitrov
– Darin Dimitrov, Commented Feb 14, 2012 at 22:41

Jez · Accepted Answer · 2013-05-24 08:44:00Z

Validating a credit card number is probably something that you don't want to implement client validation for.

But in case you are interested how to achieve it in the general case you will have to implement the same logic you have on your server in javascript.

There's just one thing that is wrong with your custom validation attribute and this is name of the validation type which must contain only lowercase letters:

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
    yield return new ModelClientValidationRule 
    { 
        ErrorMessage = this.ErrorMessage,
        ValidationType = "creditcard" // this should be only lowercase letters
    };
}

Once we have fixed that we could implement the same validation logic on the client:

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    var isValidNumber = function (value, element, params) {
        var DELTAS = [0, 1, 2, 3, 4, -4, -3, -2, -1, 0];
        var checksum = 0;
        for (var i = value.length - 1; i > -1; i--) {
            var j = value.charCodeAt(i) - 48;

            checksum += j;
            if (((i - value.Length) % 2) == 0) {
                checksum += DELTAS[j];
            }
        }
        return (checksum % 10) == 0;
    };

    jQuery.validator.addMethod('CreditCardtest', isValidNumber);

    jQuery.validator.unobtrusive.adapters.add('creditcard', { }, function (options) {
        options.rules['CreditCardtest'] = true;
        options.messages['CreditCardtest'] = options.message;
    });
</script>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Number)
    @Html.ValidationMessageFor(x => x.Number)
    <button type="submit">OK</button>
}

Obviously all the script stuff goes into a separate file and not inside the view. I just left it here for easier readability.

Dave · Accepted Answer · 2012-02-14 22:34:56Z

1

Yes, if you want to validate client-side, you'll need to write a JavaScript version of your server side validation code. (Because that's the question asked and it's time to go home.)

answered Feb 14, 2012 at 22:34

Dave

4,4223 gold badges26 silver badges30 bronze badges

Collectives™ on Stack Overflow

mvc3 Custom validation attribute doesn't validate on client side

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related