-2

我想在不刷新页面的情况下创建电子邮件联系表。所以我在我的 html 文件中添加了 jquery。我使用 html 必需属性来检查字段是否为空。但是当我在我的 html 代码中添加 jquery 代码时，所需的属性不起作用。下面是我的代码。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Contact Form</title>
    <link rel="stylesheet" media="screen" href="styles.css" >

    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

$('#submit').click(function(){

$.post("send.php", $("#mycontactform").serialize(),  function(response) {   
 $('#success').html(response);
 //$('#success').hide('slow');
});
return false;


});

});
</script>
</head>
<body>


<form id="mycontactform" class="contact_form" action="" method="post" name="contact_form">
    <ul>
        <li>
             <h2>Contact Us</h2>
             <span class="required_notification">* Denotes Required Field</span>
        </li>
        <li>
            <label for="name">Name:</label>
            <input type="text"  id="name"  name="name" placeholder="John Doe" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email"  placeholder="john_doe@example.com" required />
            <span class="form_hint">Proper format "name@something.com"</span>
        </li>

        <li>
            <label for="message">Message:</label>
            <textarea name="message" id="message"  cols="40" rows="6" required ></textarea>
        </li>
        <li>
            <button class="submit"  id="submit"  style="cursor:pointer" type="submit">Submit Form</button>
            <div id="success" style="color:red;"></div>

        </li>
    </ul>
</form>

</body>
</html>

我需要必需的属性才能工作，也需要 jquery 代码才能工作。有人能帮我吗？

4

2 回答 2

3

表单验证仅在submit表单事件上触发，除非您在其他地方触发它。改为在那里执行 AJAX，如下所示：

$(document).ready(function(){
    $('#mycontactform').submit(function(e){
        e.preventDefault();
        $.post("send.php", $(this).serialize(), function(response) {   
            $('#success').html(response);
            //$('#success').hide('slow');
        });
    });
});
于 2013-07-22T15:46:32.737 回答
2

您是在用户单击按钮时发送 AJAX 请求，而不是在他们提交表单时发送。更改.click()为.on('submit')并将其附加到表单，而不是按钮：

$('#mycontactform').on( 'submit', function () {
    ...

演示：http: //jsfiddle.net/QjPka/

于 2013-07-22T15:46:06.733 回答