javascript email validation without submitting

Question

I want to validate this email :

<div>
    <div>

        <div  >
            <big><p>please enter an email address IF you wish to
            recieve a link to your results.<p>
            E-mail Address:</big> <input name="recipient"class="upload" type="text"
            />
        <div id="correct">
            &#10004;
        </div>
        <div id="incorrect">
            &#10008;
        </div>
    </div>
</div>

I want to check if the email input is valid, if its is valid show the "correct" div , if not show the "incorrect" div, i want to do this without submitting the form.

cant anyone help ? thanks

Answer 1

Several alternatives/plugins/solutions for client side validation based on several JS frameworks are available. I am citing but one example that utilizes jQuery: http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

Answer 2

Here is a function which uses Regex to match value.

<script language="javascript">
    function checkEmail() {
    var email = document.getElementById('recipient');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email.value)) {
    alert('Please provide a valid email address');
    email.focus;
    return false;
    document.getElementById('incorrect').style.visibility="visible";
    document.getElementById('correct').style.visibility="hidden";
    }
    else
    {
    document.getElementById('correct').style.visibility="visible";
    document.getElementById('incorrect').style.visibility="hidden";
    }
    }
    </script>

Answer 3

From this answer

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\ ".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email); 
}