We often face this scenario to have one validator control (to show one error message) for a group of text-boxes.
In my case, I have a phone number field which is a combination of three independent text-boxes. And I have to validate these 3 independent text-boxes as a single unit.
Show only ONE error message if any (one or more) of the three text-boxes is empty
Solution:
I have used CustomValidator control of asp.net to achieve the result. The aspx page has the following code:
<tr>
<td>
Phone-Number
</td>
<td>
<asp:TextBox ID=”Phone1″ runat=”server” MaxLength=”3″></asp:TextBox>
-
<asp:TextBox ID=”Phone2″ runat=”server” MaxLength=”3″></asp:TextBox>
-
<asp:TextBox ID=”Phone3″ runat=”server” MaxLength=”3″></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:CustomValidator runat=”server” ID=”custValidator” ClientValidationFunction=”ClientValidate”
Display=”Dynamic” ErrorMessage=”Not a valid phone number” ForeColor=”red” Font-Name=”verdana” propertyOne=”Phone1″ propertyTwo=”Phone2″ propertyThree=”Phone3″ />
</td>
</tr>
The above code has three text-boxes (Phone1, Phone2, Phone3) and a CustomValidator control (custValidator) which has got one property “ClientValidationFunction” whose value is the name of a javascript function which has the validation logic.
This validator also contains three custom properties (you don’t find them in intellisense; just add them) each one for specifying the each text-box id of phone number field.
These custom properties can be accessed by the client-side validation function. So this is the way we can send custom parameters to the client-side validation function from the CustomValidator.
The below is the code for javascript function:
function ClientValidate(source, arguments) {
if (document.getElementById(source.propertyOne).value.length == 0 ||
document.getElementById(source.propertyTwo).value.length == 0 ||
document.getElementById(source.propertyThree).value.length == 0)
arguments.IsValid = false;
else
arguments.IsValid = true;
}
The above JS function accesses the custom properties (source.propertyOne) and verifies if the phone number fields contain any data and finally sets “arguments.IsValid” to true/false based on condition.
If set to false, page is not valid and will not be submitted.
VALIDATE ON TEXT CHANGE EVENTS
The above code works fine and shows error message if the phone number field is left empty and trying to submit the form. But what we want now is that when user moves focus from any of three phone number text-boxes, validation function should be triggered and show/hide the error message accordingly. This is what happens for general RequiredFieldValidator.
To handle this scenario, we have to write one more javascript function and add one extra property to the three independent phone number text-boxes. Below is the updated code.
<asp:TextBox ID=”Phone1″ runat=”server” MaxLength=”3″ CausesValidation=”true” OnChange=”txtZipOnChange(‘custValidator’)”></asp:TextBox>
-
<asp:TextBox ID=”Phone2″ runat=”server” MaxLength=”3″ CausesValidation=”true” OnChange=”txtZipOnChange(‘custValidator’)”></asp:TextBox>
-
<asp:TextBox ID=”Phone3″ runat=”server” MaxLength=”3″ CausesValidation=”true” OnChange=”txtZipOnChange(‘custValidator’)”></asp:TextBox>
Each text-box has now got “OnChange” event with a javscript function name as the value. So this JS function will be called everytime there is a change in any of the phone number text-box fields.
Below is the javascript function:
function txtZipOnChange(validatorId) {
var i;
for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].id == validatorId)
break;
}
ValidatorValidate(Page_Validators[i], null, null);
}
If you observe the above code, I am using the asp.net framework generated function “ValidatorValidate” to trigger the validation of custom validator.
And the Page_Validators array is also generated by asp.net framework which maintains all the validators on the page. In the above JS code I am finding the correct Page_Validators entry and triggering validation of that validator.
Below are the screenshot of above example:
