我正在尝试更新以前创建的表单以使用新字段。目前只有电子邮件正在验证，如果您点击发送它只显示电子邮件字段为空（将边框变为红色）。
代码的jsFiddle位于 here 。
我认为我忽略了一个明显的错误。
HTML：
<div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong></div>
<form id="form-1" class="form-1" name="form-1" method="post" action="index.html" enctype="multipart/form-data">
<input class="inputbox" name="name" id="name" type="text" value="Your Name:" onFocus="if(this.value=='Your Name:'){this.value=''}" onBlur="if(this.value==''){this.value='Your Name:'}" />
<input class="inputbox top-2" name="email" id="email" type="text" value="E-mail:" onFocus="if(this.value=='E-mail:'){this.value=''}" onBlur="if(this.value==''){this.value='E-mail:'}" />
<input class="inputbox top-2" name="phone" id="phone" type="text" value="Phone:" onFocus="if(this.value=='Phone:'){this.value=''}" onBlur="if(this.value==''){this.value='Phone:'}" />
<div class="select-3 top-2 fleft">
<select name="select" name="adults" id="adults" >
<option selected disabled>Adults</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9+">9+</option>
</select>
</div>
<div class="select-3 top-2 fleft">
<select name="select" name="children" id="children" >
<option selected disabled>Children</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9+">9+</option>
</select>
</div>
<div class="select-3 top-2 fleft last-1">
<select name="select" name="rooms" id="rooms" >
<option selected disabled>Rooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9+">9+</option>
</select>
</div>
<div class="select-2 top-2 fleft">
<input class="inputbox_date" name="checkin" id="checkin" value="Check-In Date:" onFocus="if(this.value=='Check-In Date:'){this.value=''}" onBlur="if(this.value==''){this.value='Check-In Date:'}" />
<input class="inputbox_date" name="checkout" id="checkout" value="Check-Out Date:" onFocus="if(this.value=='Check-Out Date:'){this.value=''}" onBlur="if(this.value==''){this.value='Check-Out Date:'}" />
</div>
<div class="clear"></div>
<div class="height-3 border-2 pad-2">
<textarea class="textarea top-2" name="comments" id="comments" onFocus="if(this.value=='ADDITIONAL COMMENTS:'){this.value=''}" onBlur="if(this.value==''){this.value='ADDITIONAL COMMENTS:'}">ADDITIONAL COMMENTS:</textarea>
</div>
<p class="center"><a href="javascript:void(0);" name="submitlink" id="submitlink" class="button top-1">Send</a></p>
<div class="clear"></div>
</form>
JS：
function checkValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
return pattern.test(emailAddress);
};
var mailsendstatus;
function userSendMailStatus(uname, uemail, uphone, uadults, uchildren, urooms, ucheckin, ucheckout, umsg) {
// checking for some valid user name
if(!uname) {
$("#name").addClass('formError');
}
else if (uname){
$("#name").removeClass('formError');
}
// checking for valid email
if(!checkValidEmailAddress(uemail)) {
$("#email").addClass('formError');
}
else if(checkValidEmailAddress(uemail)) {
$("#email").removeClass('formError');
}
// checking for phone
if(!uphone) {
$("#phone").addClass('formError');
}
else if (uphone) {
$("#phone").removeClass('formError');
}
// checking for checkin
if(!ucheckin){
$("#checkin").addClass('formError');
}
else if(ucheckin){
$("#checkin").removeClass('formError');
}
// checking for checkout
if(!ucheckout) {
$("#checkout").addClass('formError');
}
else if(!ucheckout){
$("#checkout").removeClass('formError');
}
if(uname && checkValidEmailAddress(uemail) && uphone && ucheckin && ucheckout) {
// in this case all of our inputs look good
// so we say true and send the mail
mailsendstatus = true;
$.ajax(
{
type: 'POST',
url: 'js/sendmail.php',
data: $("#form-1").serialize(),
success: function(data) {
if(data == "yes") {
$(".success").toggle();
$("#form-1").slideUp(650);
}
}
}
)};
return mailsendstatus;
}
$(document).ready(function(){
$("#form-1").submit(function() { return false; });
$("#submitlink").bind("click", function(e){
var subnamevalue = $("#name").val();
var emailvalue = $("#email").val();
var phonevalue = $("#phone").val();
var adultsvalue = $("#adults").val();
var childrenvalue = $("#children").val();
var roomsvalue = $("#rooms").val();
var checkinvalue = $("#checkin").val();
var checkoutvalue = $("#checkout").val();
var msgvalue = $("#comments").val();
var postchecks = userSendMailStatus(subnamevalue, emailvalue, phonevalue, adultsvalue, childrenvalue, roomsvalue, checkinvalue, checkoutvalue, msgvalue);
});
});
答案 0 :(得分：0)
当您的函数运行以检查它们是否为空时，它会看到您的占位符文本。这些字段实际上都不是空的/空白的。电子邮件有效，因为您还检查它是否是有效的电子邮件地址。