How to write custom client-side jQuery validation in ASP.NET MVC 2 RC? -
i've read phil haack's post on custom client-side validation in asp.net mvc 2. want same thing jquery adapter , using asp.net mvc 2 rc (as opposed mvc 2 beta post uses). has been able figure how this?
i specially want implement password matching validation (i.e. password & confirm password must match). asp.net mvc 2 rc vs.net project template show how implement on server-side (using propertiesmustmatchattribute
) not on client-side.
i assume followed phil haack's instructions here http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx) on how custom validation working ms ajax client validation. work jquery, you'll need modify microsoftmvcjqueryvalidation.js file:
in __mvc_createrulesforfield(validationfield) function, you'll need add case statement. continuing phil's example, you'll need add:
case "price":
__mvc_applyvalidator_price(rulesobj, thisrule.validationparameters["min"]);
break;
you'll need create __mvc_applyvalidator_price function:
function __mvc_applyvalidator_price(object, value) {
// min jquery validate uses validate minimum values object["min"] = value;
}
that should enough phil's example working.
now, regarding propertiesmustmatchattribute validation, doesn't mvc generates client-side json validation definition attributes decorate classes. since propertiesmustmatchattribute must used on model (and not property), can't figure out how make trigger client-side validation. instead, took different approach. created dummy validation attribute who's isvalid() overload returns true, , used attribute on property. dummy attribute delegate validation logic jquery validator's equalto function. here's dummy attribute:
public class propertiesmustmatchclienttriggerattribute : validationattribute { public string matchproperty { get; set; } public propertiesmustmatchclienttriggerattribute(string matchproperty) { matchproperty = matchproperty; errormessage = "{0} doesn't match {1}."; } public override bool isvalid(object value) { return true; } public override string formaterrormessage(string name) { return string.format(cultureinfo.currentculture, errormessagestring, name, matchproperty); } }
here custom validator:
public class propertiesmustmatchclienttriggervalidator : dataannotationsmodelvalidator<propertiesmustmatchclienttriggerattribute> { private string _message; private string _matchproperty; public propertiesmustmatchclienttriggervalidator(modelmetadata metadata, controllercontext context, propertiesmustmatchclienttriggerattribute attribute) : base(metadata, context, attribute) { _message = attribute.formaterrormessage(metadata.displayname); _matchproperty = attribute.matchproperty; } public override ienumerable<modelclientvalidationrule> getclientvalidationrules() { var rule = new modelclientvalidationrule { errormessage = _message, validationtype = "equalto" }; rule.validationparameters.add("matchfield", _matchproperty); return new[] { rule }; } }
the above custom validator needs registered in application_start() per phil's blog:
dataannotationsmodelvalidatorprovider.registeradapter(typeof(propertiesmustmatchclienttriggerattribute), typeof(propertiesmustmatchclienttriggervalidator));
finally, need modify microsoftmvcjqueryvalidation.js file:
- add following case statement __mvc_createrulesforfield:
case "equalto":
__mvc_applyvalidator_equalto(rulesobj, thisrule.validationparameters["matchfield"]);
break;
- add function:
function __mvc_applyvalidator_equalto(object, elemid) {
object["equalto"] = document.getelementbyid(elemid);
}
now need attach dummy validation attribute property:
[propertiesmustmatchclienttrigger("password")] public string confirmpassword { get; set; }
that should it.
creating dummy attribute bit ugly, hope can come more elegant solution.
Comments
Post a Comment