email validation in jquery

email validation in jquery


I have this form which  checks for  email validation in jquery 



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> My </title>

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.validate.unobtrusive.js"></script>

    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


    <style type="text/css">
    div.contactForm { width:370px; margin:0 auto; }
    form.contactUs label { display:block; }
    form.contactUs input { margin-bottom:10px; }
    input.submit { margin-top:10px; }
    input.error { background:#FF9B9B; border:1px solid red; }
    div.errorMessage { color:#f00; padding:0 0 20px; }
</style>

    <script type="text/javascript">

        
        
            $(document).ready(function() {
                $('.errorMessage').hide();
                $('.submit').click(function() {

                    var name = $('input.name').val();
                    var email = $('input.email').val();
                    var phone = $('input.phone').val();

                    if (name == '') {
                        $('input.name').addClass('error');
                        $('input.name').keypress(function(){
                            $('input.name').removeClass('error');
                        });
                    }
                    if (email == '') {
                        $('input.email').addClass('error');
                        $('input.email').keypress(function(){
                            $('input.email').removeClass('error');
                        });
                    }
                    if (phone == '') {
                        $('input.phone').addClass('error');
                        $('input.phone').keypress(function(){
                            $('input.phone').removeClass('error');
                        });
                    }





                    if (!email.Contains(".") || !email.Contains("@")) {
                        $('input.email').addClass('error');
                        $('input.email').keypress(function () {
                            $('input.email').removeClass('error');
                        });
                    }




                    if (name == '' || email == '' || phone == '') {
                        $('.errorMessage').fadeIn('medium');
                        return false;
                    }

                });
            });
</script>

    </head>

    <body>
 <div class="contactForm">

<h2>Contact Us</h2>

<div class="errorMessage">Please enter all required fields.</div>




<form action="WebForm2.aspx" method="post" class="contactUs">

    <label>Name <em>(required)</em></label>
    <input type="text" name="name" class="name" size="30" />

    <label>Email <em>(valid email required)</em></label>
    <input type="text" name="email" class="email" size="30" />

    <label>Phone <em>(required)</em></label>
    <input type="text" name="phone" class="phone" size="30" />

    <label>Message</label>
    <textarea name="message" cols="40" rows="10"></textarea>

    <br />
    <input type="submit" name="submit" value="Submit" class="submit" />

</form>

</div><!--contactForm-->

        </body>

    </html>





for some reason after I added this section 

                    if (!email.Contains(".") || !email.Contains("@")) {  
                        $('input.email').addClass('error');
                        $('input.email').keypress(function () {
                            $('input.email').removeClass('error');
                        });
                    }

the page will not go through the error validation it will just simple reload itself