Validation not working right_问答_开发者_运维开发者技术经验分享

I am trying to get my validate to work upon clicking my submit button. I don't want the fade out to occur unless everything in the form is right. My validation works on the page, but not when clicking the submit button..I don't want it to use my hide function unless the whole form is validated correctly. Here is my code. Anything here that jumps out to you guys? Fixed the wording of the question :)

<script type="text/javascript">  
    $(document).ready(function($){
        $.supersized({
            //Background image
            slides  :  [ { image : 'images/pendulumWeb.jpg' } ]                 
        });

        $("form[name=emailSubmit]").validate({
            rules: {
                title: {
                    required: true
                },
                fName: {
                    required: true
                },
                lName: {
                    required: true
                },
                profession: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    number: true
                }

            },
            messages: {
                title: {
                    required: "Please enter your title."
                },
                fName: {
                    required: "Please enter your first name"
                },
                lName: {
                    required: "Please enter your last name."
                },
                profession: {
                    required: "Please enter your profession"
                },
                email: {
                    required: "Please enter your email"
                }
            }
        });

        $("form#emailSubmit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var title = $('#title').attr('value');
            var fName = $('#fName').attr('value');
            var lName = $('#lName').attr('value');
            var profession = $('#profession').attr('value');
            var email = $('#email').attr('value');
            var phone = $('#phone').attr('value');
            var message = $('#message').attr('value');
                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: "title="+ title +"& fName="+ fName +"& lName="+ lName +"& profession="+ profession +"& email="+ email +"& phone="+ phone +"& message="+ message,
                    success: function(){
                         $('form#emailSubmit').hide(0,function() {
                            $('div#contact').fadeOut('fast  ');
                            $('div.success').fadeIn(3000);
                        });
                    }
                });
            return false;
            });

            $('#contact').animate({height: '+=600开发者_StackOverflow社区px'}, 3000, 'easeInOutExpo');
            $('#content').fadeIn(6000);


        });


</script>

Here is my html

<body>

<form id="emailSubmit" name="emailSubmit" method="post">
    <div id="submit">
        <table>
            <tr style="height: 20px;">
                <td><span class="formTitles">Title*</span></td>
                <td><input id="title" name="title" value="" size="5" max="3" type="text" />
             </td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">First Name*</span></td>
                <td><input id="fName" name="fName" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Last Name*</span></td>
                <td><input id="lName" name="lName" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Profession*</span> </td>
                <td><input id="profession" name="profession" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Email*</span> </td>
                <td><input id="email" name="email" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Phone</span></td>
                <td><input id="phone" name="phone" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Message</span></td>
                <td><textarea name="message" id="message" cols="50" rows="5"></textarea></td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td></td>
            </tr>
        </table>
        <table>
            <tr>
                <td><span class="formTitles"></span></td>
                <td><button class="buttonPositive" type="submit"> Submit</button></td>
            </tr>
        </table>    
    </div>
</form>

<div id="contact">
    <div id="content" style="display: none;">

    </div>
</div>

    <div class="success" style="display: none;">
    </div>

Sorry to have taken so long; I had to go to an opera. The way to check form validity explicitly is to call ".valid()" and check the result; it returns true if the form is valid according to the rules you set up at initialization time:

    $("form#emailSubmit").submit(function() {
        if (!$(this).valid()) {
          alert("Naughty naughty!");
          return false;
        }

        // we want to store the values from the form input box, then send via ajax below
        ...

IMHO, you souhld use the same selector for both event :

$("form[name=emailSubmit]").validate({

$("form#emailSubmit").submit(function() {

By the way, when using selector with "id" (emailSubmit), you don't need to use the tag (form) selector. In former versions of jquery (<1.4 if i remember well), it was even slower.

Eventually, i do not well understand :