我想创建一个电子邮件联系表单而不刷新页面。所以我在我的 html 文件中添加了 jquery 。我使用 html required 属性检查字段是否为空。但是当我在我的 html 代码中添加 jquery 代码时，required 属性不起作用。下面是我的代码。
索引.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="[email protected] /cdn-cgi/l/email-protection" required />
<span class="form_hint">Proper format "[email protected] /cdn-cgi/l/email-protection"</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 代码才能工作。有人能帮我吗？
表单验证 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_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');
});
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
