onClientClick not working in JavaScript

Question

I am trying to show alert if the input is not valid, but OnClientClick is not working, here is my code:

function validation1() {

    if (document.getElementById('firstname').value == "" || document.getElementById('firstname').value == "First Name..." ){
    alert("Please Enter First Name");
    } 
    if(document.getElementById('lastname').value == "" || document.getElementById('lastname').value == "Last Name..."){
    alert("Please Enter Last Name");
    }
}


<asp:Button runat="server" ID="SearchButton" Text="Instant Search" OnClick="SearchButton_Click" OnClientClick="validation1" />

My code is in master page, so could this be an issue?

Have tried many different ways to call the function using OnClientClick but no success:

Try OnClientClick="validation1()"

TechDo
– TechDo

2013-01-08 12:34:47 +00:00
Commented Jan 8, 2013 at 12:34 — TechDo
– TechDo, Commented Jan 8, 2013 at 12:34
Have tried that, tried semi colon...

Wasi
– Wasi

2013-01-08 12:38:11 +00:00
Commented Jan 8, 2013 at 12:38 — Wasi
– Wasi, Commented Jan 8, 2013 at 12:38

halfer · Accepted Answer · 2017-10-26 16:45:47Z

2

You're missing your parenthesis (brackets) from the function call, you might also want the result of the validation function determine if the server side click should fire:

function validation1() {

if (document.getElementById('firstname').value == "" ||document.getElementById('firstname').value == "First Name..." ){
   alert("Please Enter First Name");
   return false;
} 

if(document.getElementById('lastname').value == "" || document.getElementById('lastname').value == "Last Name..."){
   alert("Please Enter Last Name");
   return false;
}

return true;
}

<asp:Button runat="server" ID="SearchButton" Text="Instant Search" OnClick="SearchButton_Click" OnClientClick="return validation1();" />

The main difference here is that the client click function is returning a value to state if the validation passed or not as well as the actual method call declared correctly, easy thing to miss :).

edited Oct 26, 2017 at 16:45

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 8, 2013 at 12:35

Paulie Waulie

1,69015 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paulie Waulie Over a year ago

@Wasi - OK, do you have any idea why it's not working? Using a javascript debugger like Firebug/Chrome do you see any script errors? If you put an laert at the top of the validation function, is it called? If so then the code maybe failing at the point of trying to get the element because the id is incorrect.

iJade · Accepted Answer · 2013-01-08 13:26:36Z

0

Try this

    function validation1() {

    if (document.getElementById('firstname').value == "" || document.getElementById('firstname').value == "First Name..." ){
    alert("Please Enter First Name");
    return false;
    } 
    if(document.getElementById('lastname').value == "" || document.getElementById('lastname').value == "Last Name..."){
    alert("Please Enter Last Name");
    return false;
    }
}

Here is aspx code

<asp:Button runat="server" ID="SearchButton" Text="Instant Search" OnClick="SearchButton_Click" OnClientClick="return validation1();" />

edited Jan 8, 2013 at 13:26

answered Jan 8, 2013 at 12:42

iJade

23.9k58 gold badges163 silver badges250 bronze badges

1 Comment

rick schott Over a year ago

You must "return bla();" to stop/defer the postback.

Collectives™ on Stack Overflow

onClientClick not working in JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related