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: '+=600px'}, 3000, 'easeInOutExpo');
            $('#content').fadeIn(6000);


        });


</script>

这是我的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>

Answer 1

抱歉这么久了;我不得不去看歌剧。明确检查表单有效性的方法是调用“.valid（）”并检查结果;如果表单根据您在初始化时设置的规则有效，则返回true：

    $("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
        ...

Answer 2

恕我直言，你为这两个事件使用相同的选择器：

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

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

顺便说一句，当使用带有“id”的选择器（emailSubmit）时，您不需要使用标签（表单）选择器。在以前的jquery版本中（如果我记得很清楚的话，＆lt; 1.4），它甚至更慢。

最终，我不太明白：

我的验证在前面工作，但不是点击提交按钮时。

前面的验证VS点击是什么意思？

此致

最高

验证不正常

2 个答案: