Clientside validation for a select widget

Clientside validation for a select widget

  
Hi,

I noticed an old post (dated 23 Feb 05 by Rodrigo Sousa Coutinho) explaining how to set up custom clientside validation for input and password input fields using javascript (by setting the wt<inputname>ValidatorType's clientvalidationfunction property).

I have tried unsuccessfully to apply the same technique to a select widget. Is this possible?

Regards,
Keith.
Hello Keith,

It is in fact possible to validate a select widget, but it takes a bit more work… the reason for this is that we don’t provide a validator for the select widget so you’ll have to build one.

The validator can be created using an expression. The expression value should be the error message and you must include the following extended properties:

name: This will be used to find the validator and to set it up. ("wtMySelectValidatorType" in the sample)
controltovalidate: The id of the control to validate. This is the name of the select you want to validate prefixed with “wt”. ("wtMySelect" in the sample)
clientvalidationfunction: The javascript function you’ll be using to validate the select widget. ("mySelectCustomValidator" in the sample)
evaluationfunction: This is always "CustomValidatorEvaluateIsValid"
style: This should be set to "color:Red;display:none;", the style of the validator messages.
display: This should be set to “Dynamic”, to indicate that you wish this message to appear when the value is incorrect and disappear when the value is correct.

The way you setup the validator during page load is also a bit different. You must add your validator to the set of page validators and then call a function that prepares the recently added validator:

// This functions sets up the validators
function setValidator() {
// Get the validator we created
var val = getSpanByName("wtMySelectValidatorType");
// Add it to the page validators
Page_Validators.push(val);
// Register the new validator
ValidatorOnLoad();
}

The code for the validator function can do any check you want. In this case it validates if the selected item is “Right”:

// This is the function that implements the custom validator
function mySelectCustomValidator (source, arguments) {
// Get the field object
var objField = document.all[source.controltovalidate];
// Check if the object value is greater than "Right"
arguments.IsValid = objField.options[objField.selectedIndex].text == "Right";
}

Note the usage of a function called “GetSpanByName” in the “setValidator” function. This is an auxiliary function with the following code:

// This is a helper function, to get the correct span
function getSpanByName(spanName) {
var spans = document.getElementsByTagName("SPAN");
var i;
for (i=0; i < spans.length; i++) {
if (spans[i].name == spanName) {
return spans[i];
}
}
}

Note that this only works if there are other inputs in the web page (this is why there is another input in the sample). The other input insures that the validator code is added to the rendered page.

Best of luck,
Rodrigo
Hi Rodrigo,

As far as I understood, the difference between the CustomValidator and a validation in the onclick event of a submit button/link, is that the CustomValidator is called by all submit button/links.

But what if I need to have a javascript function to be called just before form submition? That is, how do I overwrite the onsubmit event of the form?

Thanks,
Olivier
Hello Olivier,

CustomValidators are called both on submit and on lost focus. If you insert a wrong value in an input, the message is displayed as soon as you leave that input. They also provide a standard framework for the user to define error messages and ensure the behavior stays consistent between validators.

If you want to have your own javascript executed before the form submission, I would advise you to set the onclick event of the button (you can disable the default validations by setting "Validate Inputs" to "No"). This validator just needs to return false when the inputs are invalid. This will stop the click action and in turn the submit action.

The onsubmit event of the form does a bit of extra work other than the validations. Some of this work includes setting properties required by the server to identify the button you have clicked, the status you were in before submitting the page, etc. For this reason it is not recommended to change this event.

Hope this helps,
Rodrigo
Hi Rodrigo,

thanks for the reply. I tried to open the attached sample oml but got an error message saying that 'The file you are trying to open is from a more recent version (3.1.2.2)' - however we are running version 3.1.2.7 here... do you know why I am unable to open it?

Thanks,
Keith.