Simple Javascript Validation - Not Working

Question

I've been stuck on this for longer than I intended for such a simple thing, any ideas why the intended validation is not working?

if(isset($_POST['submit'])){

    /* Posted Values from Initial Form */
    $descEmail = $_POST['email'];
    $uniqueID = $_POST['name'];

    /* Check to see if the Email Provided is already in use */
    $result = mysql_query("SELECT * FROM Table WHERE Email = '$descEmail'");
    if(mysql_num_rows($result) == 0) {
        echo 'success';
    } else {
        echo '<script type="text/javascript"> emailInvalid() </script>';
    }       
}

The Javascript:

<script type="text/javascript">

function emailInvalid(){
    document.getElementById('UserEmail').style.borderColor='#CC0033';
    document.getElementById('UserEmail').style.border='solid';
    document.getElementById('UserEmail').style.borderWidth='2px';
    document.getElementById("formErrors").innerHTML = "The Email Address: <?php echo $UserEmail ?> has already been used, Please Use a Different Email Address.";
}

</script>

The form field in question: (Form is working as expected)

<div>
    <label for="email">Email</label>
    <input type="email" id="UserEmail" name="email">
</div>

Answer 1

Uncaught ReferenceError: emailInvalid

You appear to have defined your emailInvalid in a <script> element that appears after the one in which you try to call the function (on possibly one on a different page).

You can't call a function before it exists. Change the order of your code so the function is declared before you try to call it.