Question

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

的index.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>

我需要attibute工作以及jquery代码才能工作。有人能帮助我吗？

Answer 1

Form validation仅在表单的submit事件中触发，除非您在其他地方触发它。在那里做AJAX，就像这样：

$(document).ready(function(){
    $('#mycontactform').submit(function(e){
        e.preventDefault();
        $.post("send.php", $(this).serialize(), function(response) {   
            $('#success').html(response);
            //$('#success').hide('slow');
        });
    });
});

Answer 2

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

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

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

HTML5必需属性不起作用

2 个答案: