In the previous post, I went over on how to enable client-side validation for our custom validation attribute - using a pre-build jQuery validator. Now what if you want to create your own custom script - because your validator needs to do something truly custom that the pre-build validator is not covering? No problem!
Modify your code to this:
Now create a javascript file to be included in your project (it must be referenced AFTER the basic jquery.js and jquery.validate.js and jquery.validaten.unobstrusive.js).
Additional reading:
-- read more and comment ...
[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
sealed public class MagicNumberAttribute : ValidationAttribute, IClientValidatable {
// constructor to accept the comparison property name
public MagicNumberAttribute(string thirtySevenProperty) : base() {
if (thirtySevenProperty == null) {
throw new ArgumentNullException("thirtySevenProperty");
}
ThirtySevenProperty= thirtySevenProperty;
}
// property to store the comparison field name
public string ThirtySevenProperty{ get; private set; }
protected override ValidationResult IsValid(object value, ValidationContext validationContext) {
// get property info of the "ThirtySevenProperty"
PropertyInfo thirtySevenPropertyInfo = validationContext.ObjectType.GetProperty(ThirtySevenProperty);
// check if that property exists / valid
if (thirtySevenPropertyInfo == null) {
return new ValidationResult(
String.Format(CultureInfo.CurrentCulture, "UNKNOWN PROPERTY", ThirtySevenProperty));
}
// get the value of the property
object thirtySevenPropertyValue = thirtySevenPropertyInfo.GetValue(validationContext.ObjectInstance, null);
// do comparison and return validation result with error if not equal
if (!Equals(value, thirtySevenPropertyValue)) {
return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
// return null if everything is ok
return null;
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
ModelMetadata metadata, ControllerContext context) {
var rule = new ModelClientValidationRule
{
ErrorMessage = this.ErrorMessage,
ValidationType = "magicnumber",
};
rule.ValidationParameters.Add("other", OtherProperty);
yield return rule;
}
}
As we see, in "GetClientValidationRules", I am returning a "ModelClientValidationRule" with "ValidationType" set to "magicnumber". This string is the javascript method name. The name itself is not important, but they need to be consistent between what you put here and the actual method name in the javascript method itself. I am also adding parameters into it - which then will be transformed into a name-value pair that can be retrieved in our javascript method.
Now create a javascript file to be included in your project (it must be referenced AFTER the basic jquery.js and jquery.validate.js and jquery.validaten.unobstrusive.js).
jQuery.validator.unobtrusive.adapters.addSingleVal("magicnumber", "other");
jQuery.validator.addMethod("magicnumber", function (val, element, other) {
var modelPrefix = element.name.substr(0, element.name.lastIndexOf(".") + 1)
var otherVal = $("[name=" + modelPrefix + other + "]").val();
if (val && otherVal) {
return val == otherVal;
}
return true;
);
The first line is to connect our javascript method "magicnumber" into the validation event and the rest is our client-side script to do client side validation. Our "magicnumber" method takes in "other" parameter, which will hold the value for the name for our comparison property/field - we need that to get the value of the field. We also want to consider if our model is using prefix - beyond that it is just doing a dom selector and get the value and returning a comparison result.
Additional reading:
Posts
