Combine 2 elements inside onClick

I have this perfectly working using 1 onClick call (does an email validation).

<script type='text/javascript'>
function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.m开发者_如何学Goatch(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>

In the body of my page

<a href="#" 
   title="Yes, Count Me In!" 
   onclick="emailValidator(document.getElementById('email'), 'Please Enter A Valid Email'); return false;"
>

----> Now, is it possible to perform a condition for this onClick? If the email field is valid, run this other additional call (rsvp('yes');).

<a href="#" 
   title="Yes, Count Me In!" 
   onclick="emailValidator(document.getElementById('email'), 'Please Enter A Valid Email'); rsvp('yes'); return false;" 
>

---

<a href="#" title="Yes, Count me In!" onclick="myFunction">

<script>
    function myFunction() {
        var elem = document.getElementById("email");
        emailValidator(elem, 'Please Enter A Valid Email') && rsvp('yes'); 
    }

    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

    function emailValidator(elem, helperMsg){
        return elem.value.match(emailExp) ?
            true :
            (alert(helperMsg), elem.focus(), false);
    }

</script>

First abstract that onclick code to a global function. Then validate the email and only run the rsvp function if the email is valid (i.e. it returns true)

---

Yeah, shure that's possible, but it'll probably not work out how you want it to. As is, your code will call the rsvp-function nomatter what you get from the emailValidator-function. You probably want to do something like this:

<a href="#" title="Yes, Count Me In!" onclick="if(emailValidator(document.getElementById('email'), 'Please Enter A Valid Email')){rsvp('yes');};return false;">

Another smart hint for you is to replace the document.getElementById-part with this, like so:

<a href="#" title="Yes, Count Me In!" onclick="if(emailValidator(this, 'Please Enter A Valid Email')){rsvp('yes');};return false;">

This should make sure that even if you rename the input's id, it'd still work. When inside a onclick, or onchange or whatever, this always reffer to the object being clicked/edited/etc.

Also, as suggested by others I'd recommend making a function that does this for you, but I know peoples who like to put all their logic in the onclick-handler, and since this is what you asked for I'd thought I'd show how. Note however that this gets messy fast, and doing something like

function rsvpClick() {
    if(emailValidator(document.getElementById('email'), 'Please Enter A Valid Email')) rsvp('yes');
}

and then

<a href="#" title="Yes, Count Me In!" onclick="rsvpClick();">

normally is much more clean and readable.

---

make a global function that handle the logic and call this function into your onclick event

---

You could just add a call to your rsvp() function if it passes the validation. Like this:

function ValidateAndRSVP(elem, helperMsg){     
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;     
    if(elem.value.match(emailExp)){  
        rsvp('yes');      
        return true;     
    }
    else{         
        alert(helperMsg);         
        elem.focus();         
        return false;     
    }
}