custom validator MVC + validation client side

Question

I create a custom validateur in MVC 4:

public class FirstNameValidator : ValidationAttribute
{
    private IRegistrationConfiguration _registrationConfiguration;
    public string Category { get; set; }
    public bool IsLocal { get; set; }
    public FirstNameValidator()
    {
        _registrationConfiguration = DependencyResolver.Current.GetService<IRegistrationConfiguration>();
    }
    public FirstNameValidator(IRegistrationConfiguration registrationConfiguration)
    {
        _registrationConfiguration = registrationConfiguration;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
         if (value == null)
        { 

            return new ValidationResult("Le prénom ne doit pas être vide");
        }
         else
         {
             if(string.IsNullOrEmpty(value.ToString()))
                 return new ValidationResult("Le prénom ne doit pas être vide");
               else if(value.ToString().Length<2)
                 return new ValidationResult("Le prénom doit avoir + que 2 caractères");
             else if (value.ToString().Length > 30)
                 return new ValidationResult("Le prénom doit avoir - que 30 caractères");

         }

         return null;

    }

}

i user this data annotation in my viewModel:

 public class RegistrationViewModel
{
    public string Country { get; set; }
    public string Civility { get; set; }
    [FirstNameValidator(Category = "Registration", IsLocal = false)]
    public string FirstName { get; set; }
    public string LastName { get; set; }

}

How can i do client-side validation ??

Answer 1

Based on the code you are writing, you might be better off using the RegularExpressionAttribute instead. You can use a pattern such as "[A-Za-z]{1,30}$" to ensure that your FirstName is between 1 and 30 characters long. Alternatively, you can also use the RequiredAttribute to mark the field as mandatory.

The benefit of using these validators is that they are already hooked up to the client side validation in JQuery.

If you must use your own validators, then implement IClientValidatable, and write a custom JQuery validation adapter.

As an aside, in our projects we roll our own Validators that used a regex pattern matcher in the IsValid() method. We then hook that up to the existing regex validator adapter in JQuery via the IClientValidatable method. We did this so that we could control the error messages being used.

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
    ModelClientValidationRule rule = new ModelClientValidationRule();
    rule.ErrorMessage = ErrorMessages.ClientFieldInputValidation;
    rule.ValidationType = "regex";
    rule.ValidationParameters.Add("pattern", _regEx);
    yield return rule;
}

Answer 2

1. Implement IClientValidatable in your attribute.

   public class FirstNameValidator : ValidationAttribute, IClientValidatable

2. Write javascript adapter and include it in your view.

3. Write javascript validation rule itself and include it in your view.

You can search "asp.net mvc 4 custom client side validation" for more details. For example, you can look Custom data annotation validator or How to support client side custom validation