Weeks ago, I covered how to build custom model-aware validators using Foolproof. A question was asked, “How do I build an accompanying clien
t side validator?”. So today I’ll cover that!
In that post, we built a validator that ensured that new users in the “Software Developers” role were also marked as working in the “IT Department.” In this post, we are going to build upon that example.
First, make sure you are including the necessary client side validation scripts:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script> <script src="../../Scripts/MvcFoolproofValidation.js" type="text/javascript"></script>
“RoleValidInDepartmentAttribute” was the name of our attribute, so when we are registering our client validator with the ValidatorRegistry, just drop the “Attribute” part. In your included script file add the following code:
Sys.Mvc.ValidatorRegistry.validators["RoleValidInDepartment"] = function (rule) {
return function (value, context) {
};
};
The returned function has two parameters, “value” and “context”. “Value” holds the value of the field that the validator has been placed on – in this example, “Role”. In order to get the value of Department, we have to figure out the Id of the Department field – Foolproof’s helper function getId() helps us with that:
var dependentProperty = foolproof.getId(context.fieldContext.elements[0], "Department"); var dependentValue = document.getElementById(dependentProperty).value;
Once we have both values, we add the validation logic. Return true if validation passes and use the context parameter to return the error message if it fails. The final code:
Sys.Mvc.ValidatorRegistry.validators["RoleValidInDepartment"] = function (rule) {
return function (value, context) {
var dependentProperty = foolproof.getId(context.fieldContext.elements[0], "Department");
var dependentValue = document.getElementById(dependentProperty).value;
if (value == "Software Developers") {
if (dependentValue == "IT Department")
return true;
else
return context.validation.fieldErrorMessage;
}
return true;
};
};
[…] Update: I’ve posted how to create an accompanying client side validator. […]
Thank you for this great extension. The only problem that I’ve encountered is with the client side validation.
For example in my model, I have:
public bool recur_timely { get; set; } [RequiredIfTrue("recur_timely", ErrorMessage = "* required")] public string recur_time_unit_count { get; set; }The client code does not observe the onchange event of the recur_timely checkbox so when recur_timely is false, the recur_time_unit_count error message is not cleared. The error message does clear however when the submit button is clicked.
I have some js skill but I don’t know enough about the MVC Validation to be able to fix the problem or submit a patch yet.
@Richard, it must be some kind of configuration issue. Ensure that you are including all the necessary JavaScript files. I replicated the example you gave and have it working, here is the full source of the example. Hope this helps – let me know.
@Nick Thanks for such a quick response. I can’t open the Solution with VS2008 so this is a good time to upgrade to 2010. I’ll report back after the upgrade.
I ran the TestingCheckbox and it didn’t behave as I wished. Shouldn’t the error message disappear when the checkbox is unchecked?
https://dl.dropbox.com/u/8817969/checkbox_test.png
If the recur_time_unit_count field is not required, shouldn’t the error for that field also be hidden?
Thanks again for your help.
Ah – I see what you are after now. It would seem that in the case of a check box, the client validation routines only run when use attempts to submit the form. Referencing the screen shot you sent, when you press the Go button, client validation will pass and the form submits. I agree it will would be nice if validation ran “onchange” – I’m not sure if this is something I can make happen or not, I’ll have to dig into the Microsoft Validation library and see what my options are.
hello sir,
i have doubt in anti-phishing….what is mean by anti-phishing and its use ..then what is mean by disruption tolerant network and its use….
How can i do that with JQuery.
As we discussed eaelirr, you may use a CSS Validator to verify the theme of a blog to reduce the chances of facing such errors. Read 5 steps in deciding which template to use.