我希望在我的联系表单中添加一个确认电子邮件字段。我知道如何添加确认电子邮件字段,但我不知道如何添加 javascript 以将确认电子邮件与原始电子邮件相匹配。任何人都可以帮助我或者有一个我可以学习的教程吗?谢谢
联系表格html:
<div id="contactcontainer">
<div id="form">
<h3>Contact Us</h3>
<form action="contact.php" method="post">
<p>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required">
<span>Please enter your name</span>
</p>
<p>
<label for="email">Email:</label>
<input name="email" id="email" type="text" class="required">
<span>Please enter a valid email address</span>
</p>
<p>
<label for="number">Phone Number:</label>
<input name="number" id="number" type="text" class="required">
<span>Please enter your phone number</span>
</p>
<p>
<label for="date">Trip Date:</label>
<input name="date" type="text" id="datepicker" class="required"/>
<span>Please select a date</span>
</p>
<p>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text">
<span>Please enter your subject</span>
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" class="required"></textarea>
<span>Please enter your message</span>
</p>
<p>
<input type="submit" value="Submit" class="btn-submit">
</p>
</form>
</div>
</div>
Javascript:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var $submit = $(".submit input");
var $required = $(".required");
function containsBlanks(){
var blanks = $required.map(function(){ return $(this).val() == "";});
return $.inArray(true, blanks) != -1;
}
function isValidEmail(email){
return email.indexOf("@") != -1;
}
function requiredFilledIn(){
if(containsBlanks() || !isValidEmail($("#email").val()))
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}
$("#form span").hide();
$("input,textarea").focus(function(){
$(this).next().fadeIn("slow");
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
//Check all required fields.
requiredFilledIn();
});
$("#email").keyup(function(){
//Check for a valid email.
if(isValidEmail($(this).val()))
$(this).next().removeClass("error").addClass("valid");
else
$(this).next().removeClass("valid").addClass("error");
});
requiredFilledIn();
</script>