firing both onclientclick and Client side validation from validation control on button Client click

Question

I have few ASP Text Box controls on a Page, to which Custom Validators are added. I have Save Button, which validates these Text boxes. I have just added the Validation Group as same as that of the Text boxes.

In order to incorporate addtional requirement, I have added onClientClick function for Save button. But amused to find that Validation due to Validation Group(validator controls) is not firing instead the onClientClick function is called and server side Click event is called.

Javascript Code

function ValidateInputs(source, args) {
            var regex = /^(-{0,1}\d{1,100})$/;
            if (args.Value.length < 1) {
                $("span[id$='spn_error']").html('Please Enter ' + $(source).attr("errormessage"));
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else if (!regex.test(args.Value)) {
                $("span[id$='spn_error']").html($(source).attr("errormessage") + ' allows only numbers');
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else {
                if ($("span[id$='spn_error']").html().indexOf($(source).attr("errormessage")) >= 0)
                    $("span[id$='spn_error']").hide();
                args.IsValid = true;
                return;
            }
        }

function isValidTracker() {
//Dummy Code Say Confirm button
return(confirm('Are you sure');)

}

HTML Code

<span class="errormesg" runat="server" id="spn_error" style="display: none;
                        font-size: 9px;"></span>
<asp:TextBox ID="txtLastMonthCount" runat="server" CssClass="inputbox" Width="75px" autocomplete="off" onkeypress="return isNumberKey(event);" ValidationGroup="g1"></asp:TextBox>

<asp:CustomValidator ID="CVLastMonthCount" runat="server" ErrorMessage="Last Months Closing Count" Text="<img src='../images/alert.gif' alt='Please Enter Last Months Closing Count' title='Please Enter Last Months Closing Count' />" 
    ValidationGroup="g1" ClientValidationFunction="ValidateInputs" OnServerValidate="ValidateInputs" ControlToValidate="txtLastMonthCount" ValidateEmptyText="true"></asp:CustomValidator>

<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" ValidationGroup="g1" OnClientClick="return isValidTracker();" OnClick="btnSave_Click" />

Please help me in finding the solution to fire onclientclick and validation control of Save button click.

score 7 · Accepted Answer · answered Aug 01 '11 at 12:15

7

Change OnClientClick from return isValidTracker() to if (!isValidTracker()) return false;

answered Aug 01 '11 at 12:15

Yuriy Rozhovetskiy

22,270
4
37
68

Of course that's working. Could you please explain me the reason behind that, as there is no much change. – suryakiran Aug 01 '11 at 12:35
I'm not sure but guess that validation controls attach own handlers to click event of button that re-evaluate all validators in validation group. But since you return boolean value from inline code the further handlers are not involved. – Yuriy Rozhovetskiy Aug 01 '11 at 13:19

score 2 · Answer 2 · answered Aug 01 '11 at 13:16

2

Thanks for the Solutions provided. I too got a solution while googling, thought of sharing it, as it would be helpful in various other scenarios for others like me.

function isValidTracker() {

    if (Page_IsValid) {
        return(confirm('Are you sure');)//Dummy Code Say Confirm button
    }
    else
    {
        return false;
    }

    }

Where Page_IsValid is the Java script Variable set by the ASP.Net Validation Control. It is set to true when all the validation controls are successfully validated. Thanks :)

answered Aug 01 '11 at 13:16

suryakiran

1,976
25
41

Did you try to fill out correct values in all textboxes and then press Tab button? – Yuriy Rozhovetskiy Aug 01 '11 at 13:21
Yes. I did try and it works fine. The Above function is called only on the onClientClick of the Save Button – suryakiran Aug 01 '11 at 13:25

score 1 · Answer 3 · answered Aug 01 '11 at 12:19

OneHalf's solution works, but I'd bake the final check into your validator - this ensures you're not asking the user "are you sure?" until you know their action is valid...

    function ValidateInputs(source, args) {
    var regex = /^(-{0,1}\d{1,100})$/;
    if (args.Value.length < 1) {                 
        $("span[id$='spn_error']").html('Please Enter ' + $(source).attr("errormessage"));
        $("span[id$='spn_error']").show();                 
        args.IsValid = false;                 
    }             
    else if (!regex.test(args.Value)) {                 
        $("span[id$='spn_error']").html($(source).attr("errormessage") + ' allows only numbers');                
        $("span[id$='spn_error']").show();                 
        args.IsValid = false;                
    } else {                 
        if ($("span[id$='spn_error']").html().indexOf($(source).attr("errormessage")) >= 0)                     
            $("span[id$='spn_error']").hide();                 
        args.IsValid = true;
    }

    if (args.IsValid) args.IsValid = isValidTracker();
}

Though I would agree that there's been an oversight on the ASP.NET team's part - your implementation seems more intuitive and should have been supported.

B

Suppose I have more than one Text Box controls for which same Custom Validation function is called. In that scenario this function might be called multiple times, which is not a desired result. — suryakiran, Aug 01 '11 at 12:39
@suryakiran - agreed - that's a fully different scenario. If you want answers for a different scenario, post the different scenario :) In this scenario, where you have a custom validator with no ControlToValidate property (therefore the assumption is you will use that custom validator for all controls in the group) this solution works fine. — Brian, Aug 01 '11 at 13:05

score 0 · Answer 4 · answered Mar 31 '17 at 07:28

0

Hello I have also face the same issue. CausesValidation="true" property solved my problem.

answered Mar 31 '17 at 07:28

jyoti

1

Could you elaborate more – Panther Mar 31 '17 at 07:46
I have a dropdownlist inside a listview,the values selected in the dropdown must be different for all rows in listview for that i write a javascript function which i am calling on save button also there are other controls which are required and for that required field validator is used and validated on the same button. – jyoti Mar 31 '17 at 09:25

firing both onclientclick and Client side validation from validation control on button Client click

4 Answers4