Asp.Net Validation Summary: How to show ValidationSummary using JavaScript

Hi,
Few days back i got a situation that i need to run Validation of a particular ValidatorControl (RequiredFieldValidator) using ValidatorEnable function and was need to show ValidationSummary to show its result.
Achieved the same using ValidationSummaryOnSubmit(); function exposed at client side.

<script type="text/javascript" language="javascript">

function PerformValidation() {
              ValidatorValidate(document.getElementById('rfvName'));
              ValidationSummaryOnSubmit();
 }

</script>

 

Note:  ValidationSummaryOnSubmit takes an argument as validationGroup. If you want to show ValidationSummary for a particular validation group, then call function passing name of validation group.

If function is called without any arguments, then it will show all ValidationSummary (if error) in page.

Asp.Net Validators: Useful Client-Side Properties & Methods

Hi,

This post expose few useful property and methods of Asp.Net Validators at client-side in order to interact with them when needed using JavaScript.

1. Page_IsValid

Use: This is a property exposed by Asp.Net validators in order to check the status of validations performed. Similarly to Page.IsValid property at server-side.

Value: 
True - If all Validations are successful

False - If any one of the Validation fails

2.ValidatorEnable(val, enable)

Parameters:
val:  object, Validator Control Object

enable: bool, Enables/Disables Validation control

How To Call:
ValidatorEnable(document.getElementById('validatorid')); //enable will be true - default or

ValidatorEnable(document.getElementById('validatorid'), true);

Use: To enable/disable Validation Control and to fire Validation of a particular Validator control and it updates Page_IsValid property of page.
It performs 3 things
1. Enable/Disable Validation control (based on parameter, enable)
2. Fires Validation
3. Updates Page_IsValid property to reflect result of Validation performed.
If you want to perform only Step 2 (Fires Validation), you can use below function

3. ValidatorValidate(val, validationGroup, event)

Parameters:
val: object, Validator Control Object

validationGroup: string, Group of validation control

event: event, Event caused Validation to fire
How to call: 
ValidatorValidate(document.getElementById('validatorid')); or
ValidatorValidate(document.getElementById('validatorid'), 'grpAdd'); or
ValidatorValidate(document.getElementById('validatorid'), 'grpAdd', event);
Use: To fire Validation of a particular Validator control but it doesn't updates Page_IsValid property of page.

4.ValidationSummaryOnSubmit(validationGroup)

Parameters:
validationGroup: string, Used to show Validation Summary of this group (if not supplied it will work on all ValidationSummary in page)

How To Call:
ValidationSummaryOnSubmit(); or

ValidationSummaryOnSubmit('grpAdd');

Use: It is used to show ValidationSummary of particular group(if specified). Suppose you have called  ValidatorEnable of a ValidationControl and want to show ValidationSummary on failure, you can use function ValidationSummaryOnSubmit to achieve this.
http://abhijit-j-shetty.blogspot.com/2011/03/aspnet-validation-summary-how-to-show.html

Asp.Net Validations: Execute OnClientClick after Validator Controls completed their validations.

Hi,
Suppose you want to call a function using OnClientClick property of a button; but this call should be after your Asp.Net Validators validation is done, then you can use following approach:

In Short:
Instead of calling your javascript function directly call it using window.setTimeout with 0 millisec as,
<asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="window.setTimeout(TestValidation,0);"/>

OR (If need to pass parameters to your function)

<asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="window.setTimeout(function(){ TestValidation(param1, param2); },0);"/>


Your Client Side function:
function TestValidation() {

            //This is executed after your Validation

            if (Page_IsValid) {
                //Validation is successful
            }
            else {
                //Validation Failed
            }
}

In Long:
Lets demonstrate this:
1. Get a textbox control in your page, which will be validated.

 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

2. Get a RequiredFieldValidator for your TextBox to validate.
<asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="Please enter a name" ValidationGroup="grpName"></asp:RequiredFieldValidator>

3. Get a button; on postback of which Validation is to be fired.
<asp:Button ID="btnShow" runat="server" Text="Show Name" OnClientClick="showName();" ValidationGroup="grpName" />

I have ValidationGroup property set to  grpName for Button and RequiredFieldValidator so that they belong to same group on Validation.

Now i want to show Name from TextBox  in alert only if RequiredFieldValidation is successful. i.e. Show Name from TextBox if it's not blank. To do this i have attached  showName() function to OnClientClick property of Button which is as:

function showName() {
            if (Page_IsValid) {
                var txtName = document.getElementById("txtName");
                alert(txtName.value);
            }
}
Note: Page_IsValid is a property exposed at client side to check status of Validations that is fired (similarly to property, Page.IsValid at server side)

Now when you run your page and click Show Name button without entering any text in TextBox, you will first see an alert which shows nothing and then ErrorMessage is displayed as "Please enter a name".
This means OnClientClick is executed before Validation is performed.

In order to get our function  showName to execute after Validation is performed you just have to change one thing:
<asp:Button ID="btnShow" runat="server" Text="Show Name" OnClientClick="window.setTimeout(showName,0);" ValidationGroup="grpName" />

Yes, Instead of directly calling your method in OnClientClick call it using window.setTimeout with 0 millisec as: OnClientClick="window.setTimeout(showName,0);"

Note: You can call your method with parameters using setTimeout: window.setTimeout(function(){ funcName(param1, param2, ...); },0);

Now on click of button Show Name you will only see an alert if Textbox contains any text else you will see an ErrorMessage (without any alert).

Javascript: Get topmost parent window in series of nested child windows.

Hi,
Suppose you have opened a pop up window using window.open which in turn opens a new popup window and so on.
For Ex: Parent > Child1 > Child2 > Child3 > ...
Here, > indicates relationship Parent Window > Child Window

Now suppose you want topmost parent window (Parent) from any child window (say, Child3) then you can get this using below function:

Insert this code in your Child3 page:

<script type="text/javascript" language="javascript">

function getTopMostParentWindow() {
           var win = window;
           var topWindow = null;
           while (win = win.opener) {
                topWindow = win;
            }
            return topWindow;
 }

</script>

Now this method will return top most parent window if exists, else null.