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;     
    }
}