Javascript 提交后显示JS/Ajax消息

我用javascript/ajax设置了一个表单，在提交成功时不重新加载页面

---

表单工作并显示成功消息。问题是它没有在正确的分区中显示成功消息。我按submit。成功消息应显示在

中指定的表单上方。相反，它显示在顶部

HTML代码：

<form id="contact" name="contact" method="post" novalidate>
    <fieldset>
        <label for="name" id="name">Name<span class="required">*</span>
        </label>
        <input type="text" name="name" id="name" size="30" value="" required/>
        <label for="email" id="email">Email<span class="required">*</span>
        </label>
        <input type="text" name="email" id="email" size="30" value="" required/>
        <label for="Message" id="message">Message<span class="required">*</span>
        </label>
        <textarea name="message" id="message" required></textarea>
        <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
</form>
<div id="success"> <span>
                    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
                 </span>

</div>
<div id="error"> <span>
                    <p>Something went wrong, try refreshing and submitting the form again.</p>
                 </span>

</div>

名字*
电子邮件*
信息*
您的邮件已成功发送！我会尽快联系的

出现问题，请尝试刷新并再次提交表单

JAVASCRIPT代码：

<script type = "text/javascript" >
/*validate contact form*/
$(function () {
    $('#contact').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
        },
        submitHandler: function (form) {
            $(form).ajaxSubmit({
                type: "POST",
                data: $(form).serialize(),
                url: "contact_me.php",
                success: function () {
                    $('#contact :input').attr('disabled', 'disabled');
                    $('#contact').fadeTo("slow", 0.15, function () {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor', 'default');
                        $('#success').fadeIn();
                    });
                },
                error: function () {
                    $('#contact').fadeTo("slow", 0.15, function () {
                        $('#error').fadeIn();
                    });
                }
            });
        }
    });
}); 
</script>

/*验证联系人表单*/
$（函数（）{
$（“#联系人”）。验证({
规则：{
姓名：{
要求：正确，
最小长度：2
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
必填项：true
},
},
信息：{
姓名：{
要求：“来吧，你有名字，不是吗？”，
minlength:“您的姓名必须至少包含2个字符”
},
电邮：{
必填：“无电子邮件，无消息”
},
信息：{
要求：“嗯……是的，你必须写一些东西来发送此表格。”，
minlength：“就这些？真的吗？”
},
},
submitHandler:函数（表单）{
$（表格）.ajaxSubmit({
类型：“POST”，
数据：$（表单）.serialize（），
url:“contact_me.php”，
成功：函数（）{
$（'#contact:input'）.attr（'disabled'，'disabled'）；
$（'#contact'）.fadeTo（“慢”，0.15，函数（）{
$（this.find（':input'）.attr（'disabled'，'disabled'）；
$（this.find（'label'）.css（'cursor'，'default'）；
$（'success'）.fadeIn（）；
});
},
错误：函数（）{
$（'#contact'）.fadeTo（“慢”，0.15，函数（）{
$（“#错误”）.fadeIn（）；
});
}
});
}
});
}); 

---

当然还有更多的html代码，因为它被嵌入到一个完整的网页中。我不知道html代码中是否有任何东西会影响它。非常感谢您的帮助，谢谢

您的问题在于CSS。您的

#成功span

为

位置：绝对

。删除此项，它将显示在正确的位置。

“成功消息应显示在表单的正上方”是否尝试以“模式”窗口/弹出样式显示？不，不是弹出样式。如果有帮助，您可以在此处查看live版本：您的成功和错误消息都由包含

段落
标记的div组成，这些标记是块级元素，围绕
span
标记，这些标记是内联元素。根据W3C标准，这是无效代码。试着修复你的HTML，看看你是否得到同样的结果。这很容易。我感谢你的帮助！