Question

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src ="valid.js"></script>
<script type="text/javascript">
$(document).ready(function($){
    $("#contact-form").validate({
            rules: {
                fullName: {           //input name: fullName
                    required: true,   //required boolean: true/false
                    minlength: 5,       
                },
                email: {              //input name: email
                    required: true,   //required boolean: true/false
                    email: true       //required boolean: true/false
                },
                subject: {            //input name: subject
                    required: true,   //required boolean: true/false
                    minlength: 5
                },
                message: {            //input name: message
                    required: true,
                    minlength: 1
                }
            },
            messages: {               //messages to appear on error
                fullName: {
                      required:"Please put your full name.",
                      minlength:"C'mon full name please."
                      },
                email: "Enter a valid email.",
                subject: {
                      required: "Whats the topic?",
                      minlength: ""
                      },
                message: {
                      required: "What did you want to say?",
                      minlength: "Please complete your thoughts, then submit."
                      }
            },
            submitHandler: function(form) {
                   $(form).ajaxSubmit({
                            url:"echo/html",
                           type:"POST",
                        success: function($){
                           $("#contact-form").delay(500).fadeOut("slow", function(){
                $("#sent").fadeIn("slow");
            });
            return false;
                      }
                    });
            }

        });  
})

</script>

<style type="text/css">
#contact{
    padding: 20px;
    width: 250px;
    background: #FFF;
    border: 1px solid #29216d;
    position: static;
    margin-top:50px;
    position: fixed; 
    z-index: 200;
}   
.txt-input,
.input{
    color:#aaa;
    margin: 3px 0;
    font-family: Helvetica;
    font-size: 11px;
}
.txt-input{
    width: 250px;
}
.input{
    width: 200px;
}
.txt-input:focus,
.input:focus{
    color:#000;
}
label.error{
    float: left;
    font-size: 10px;
    font-weight: bold;
    color:#F0F;
}
.submit{
    margin-top:20px;
    display: block;
}
#sent{
    display:none;
}

</style>
<div id="contact" class="corner-5">
    <a class="handle" href="mailto%3Aelan%40trybuch.com">Content</a>
    <form id="contact-form" method="post">
        <input class="input required error" type="text" name="fullName" title="What shall I call you?"/>
        <input class="input required error" type="text" name="email" title="foo@bar.com"/>
        <input class="input required error" type="text" name="subject" title="Topic of conversation"/>
        <textarea class="txt-input required error" name="message" rows="6"></textarea>
        <input class="submit" type="submit" name="submit" value="submit"/>
    </form>
    <div id="sent">Sucess</div>
</div>

查看上面的代码。

所有验证器都正常工作，但是当我填写所有数据字段时，它不会显示成功消息。

我不知道我做错了什么。

提前致谢。

Answer 1

您的提交处理程序有问题，它正在使用参数$覆盖成功回调中的jQuery对象

submitHandler: function(form) {
    $(form).ajaxSubmit({
        url:"/echo/html",
        type:"GET",
        success: function(){
            $("#contact-form").delay(500).fadeOut("slow", function(){
                $("#sent").fadeIn("slow");
            });
            return false;
        }
    });
}

演示：Fiddle

显示或隐藏在jQuery验证器插件中不起作用

1 个答案: