javascript - 在验证和发送邮件后更改联系表单的 html

Question

我正在为我的页面开发一个由 php 驱动的联系表单，在单击提交按钮并且 (!) 邮件已发送后，我想替换 H​​TML 的内容。到目前为止，我可以管理，在单击 .btn 之后，HTML 会被替换，但那是在进行任何验证并发送邮件之前发生的。你能告诉我一个方法吗？多谢!

$(document).ready(function() {
	
	var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
	
    $('.btn').click(function(){
    	$('.form').html('').append(newHTML);
    });
});

.contact-form {
	margin-top:30px;
	margin-bottom:70px;
}

.contact-form h1 {
	margin-bottom:70px;
}

.contact-form input {
	width:70%;
	margin:10px auto 20px auto;
}

.message textarea {
	max-width:80%;
	width:80%;
	margin:10px auto 20px auto;
	height:100px;
}

.contact-form .btn {
	background-color:#6f8595;
	color:white;
	transition:0.3s;
	width:50%;
}

.contact-form .btn:hover {
	background-color:white;
	color:#6f8595;
	transition:0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


    <form class="form clearfix" action="index.php" method="post">
	<div class="col-sm-6">
		<p>Name:</p>
		<input type="text" name="name" placeholder="Your full name here" required>
		<p>Email:</p>
		<input type="email" name="email" placeholder="Your email here" required>
	</div>
	<div class="col-sm-6">
		<p>Message:</p>
		<div class="message"><textarea name="message">Hello YourSite, </textarea></div>
		<div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
	</div>
</form>

Answer 1

您应该在隐藏表单之前检查您的表单是否有效。使用 valid() 尝试这样的事情:

$('.btn').click(function(){
    if($('.form').valid())
        $('.form').html('').append(newHTML);
});