我有一个带有jquery验证器脚本的php表单,该脚本仅验证了四个必填字段中的两个。经过验证的两个字段是名称和电子邮件,尽管如果您不输入任何内容 - 错误消息显示"仅字母字符"而不是"请输入您的姓名"。设计要求我将每个字段的名称作为占位符放在表单中,我不确定这是否是它无法正常工作的原因。为了平衡这一点 - 我将每个字段的名称放在表单之外,然后用显示 none 的 css span 类将其隐藏,但脚本仍然没有拾取它。有什么建议吗?
<?php
function isRequestSet( $name ) {
if ( isset ( $_REQUEST[$name] ) ) {
return ( $_REQUEST[$name] != "" ) ;
}
return false;
}
$name = "";
if ( isRequestSet('name' ) ) {
$name = $_REQUEST['name'];
}
$number = "";
if ( isRequestSet('number') ) {
$number = $_REQUEST['number'];
}
$email = "";
if ( isRequestSet( 'email' ) ) {
$email = $_REQUEST['email'];
}
$postcode = "";
if ( isRequestSet('postcode' ) ) {
$location = $_REQEUST['postcode'];
}
$how_did_you_hear_about_us = array();
if ( isset( $_REQUEST['how_did_you_hear_about_us'] ) ) {
$how_did_you_hear_about_us = $_REQUEST['how_did_you_hear_about_us'];
}
$message = "";
if ( isRequestSet('message' ) ) {
$location = $_REQEUST['message'];
}
$apartment_price_range = array();
if ( isset( $_REQUEST['apartment_price_range'] ) ) {
$apartment_price_range = $_REQUEST['apartment_price_range'];
}
if ( ($name !="") && ($number != "") && ($email != "") && ($isspam !="yes") ) {
$to = 'name@email.com';
$from = $to;
$headers = 'From: ' . $to . "'n" .
'Reply-To: ' . $to . "'n";
$vars = array( 'name' , 'number' , 'email' , 'postcode' , 'message' ) ;
$message = "-----------'n" ;
foreach ( $vars as $v ) {
$value = $_REQUEST[$v];
$message .= "$v:'t$value'n";
}
$message .= "-----------'n" ;
$message .= "'nHow did you hear about us?:'n" ;
foreach ( $how_did_you_hear_about_us as $how_did_you_hear_about_us ) {
$message .= "$how_did_you_hear_about_us'n" ;
}
$message .= "-----------'n" ;
$message .= "'nApartment price range:'n" ;
foreach ( $apartment_price_range as $apartment_price_range ) {
$message .= "$apartment_price_range'n" ;
}
$subject = "From: $name <$email>";
mail( $to , $subject , $message , $headers, "-f $from" );
$confirm = true;
} else {
$confirm = false;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/graphite.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/graphitephone.css" rel="stylesheet" media="handheld, only screen and (max-device-width: 480px)" />
<script src="js/gen_validatorv4.js" type="text/javascript"></script>
<style>
span {display: none;}</style>
</head>
<body onload="javascript:preload">
<div id="container">
<div id="header"><a href="index.html" target="_self"><img src="images/HomeBanner.jpg" width="900" height="162" border="0" /></a>
<div id="ruler"></div><!--end header-->
<div id="nav">
<ul>
<li class="list1"><a href="index.html" id="item1"><span class="none">STORY</span></a></li>
<li class="list2"><a href="#" id="item2"><span class="none">APARTMENTS</span></a>
<ul>
<li class="list7"><a href="gallery.html" id="item7"><span class="none">GALLERY</span></a></li>
<li class="list8"><a href="floorplans.php" id="item8"><span class="none">FLOORPLANS</span></a></li>
</ul>
</li>
<li class="list3"><a href="meet-the-locals.html" id="item3"><span class="none">MEET THE LOCALS</span></a></li>
<li class="list4"><a href="meet-the-creators.html" id="item4"><span class="none">MEET THE CREATORS</span></a></li>
<li class="list5"><a href="location.html" id="item5"><span class="none">LOCATION</span></a></li>
<li class="current6"><span class="none">CONTACT</span></li>
</ul>
</div><!--end nav-->
<div id="main">
<div id="contactform">
<table width="250px" border="0" cellspacing="0px" cellpadding="0px">
<form name="myform" method="post" action="" />
<input type='hidden' name='submitted' value='yes' />
<tr>
<td colspan="2"><?php
if ($confirm ) {
echo "<p>Thank you for enquiry</p>
<p>We will contact you shortly to advise on apartment availability and pricing.<p>";
} else {
if (isRequestSet( 'submitted' ) && $_REQUEST['submitted'] == "yes" ) {
echo "Request not sent, please complete all required fields marked '*'.";
}
}
?></td>
</tr>
<tr>
<td colspan="2" valign="middle"><p><span>name</span><input type="text" name="name" placeholder="Name*" id="contact_name" /></p></td>
</tr>
<tr>
<td colspan="2" valign="middle">
<table width="250px" border="0" cellspacing="0px" cellpadding="0px">
<tr>
<td bgcolor="#FFF" valign="baseline" height="10px"><p><img src="images/spacer.gif" width="1" height="5" /><span>number</span><input type="text" name="number" placeholder="Contact Number*" id="contact_number" /></p></td>
<td width="8px" height="10px"><img src="images/spacer.gif" width="8" height="5" /></td>
<td bgcolor="#FFF" valign="baseline" height="10px"><p><img src="images/spacer.gif" width="1" height="5" /><span>postcode</span><input type="text" name="postcode" placeholder="Postcode*" id="contact_postcode" /></p></td>
</tr>
<tr><td><img src="images/spacer.gif" width="1" height="6" /></td></tr>
</table></td></tr>
<tr>
<td colspan="2" valign="middle"><p><span>email</span><input type="text" name="email" placeholder="Email*" id="contact_email" /></p></td>
</tr>
<tr>
<td colspan="2"><p><select name="how_did_you_hear_about_us[]" id="" class='select-box'>
<option label="How did you hear about us?" value="0">How did you hear about us?</option>
<option label="realestate.com.au" value="realestate.com.au">realestate.com.au</option>
<option label="domain.com.au" value="domain.com.au">domain.com.au</option>
<option label="the age" value="the age">the age</option>
<option label="the herald sun" value="the herald sun">the herald sun</option>
<option label="billboard" value="billboard">billboard</option>
<option label="bpmcorp.com.au" value="bpmcorp.com.au">bpmcorp.com.au</option>
<option label="google" value="google">google</option>
<option label="site signage" value="site signage">site signage</option>
<option label="other" value="other">other - please state in box below</option>
</select></p></td>
</tr>
<tr>
<td colspan="2"><p>
<textarea name="message" cols="33" style="background:#fff; border:0px;" placeholder="What would you like to know?"></textarea>
</p></td>
</tr>
<tr>
<td><p>Price?</p></td><td rowspan="4" valign="top" align="right"><input type="image" class="rollover" id="contact_submit" src="images/buttons/BTN_Submit.png" alt="Submit" width="72px" height="68px" border="0" hover="images/BTN_Submit_over.png" name="Submit" value="Login"></td>
</tr>
<tr>
<td valign="middle"><p><input name="apartment_price_range[]" type="checkbox" value="350k-400k" style="background:#F9DC31; color: #000000;" /> 350k-400k</p></td></tr>
<tr>
<td><p><input name="apartment_price_range[]" type="checkbox" value="450k-550k" background="#F9DC31" /> 450k-550k</p></td></tr>
<tr><td><p><input name="apartment_price_range[]" type="checkbox" value="550k+" background="#F9DC31" /> 550k+</p></td></tr>
</form>
<tr><td colspan="2"><p class="italics" style="font-size:10px;">* denotes a required field</p> </td>
</tr>
<tr>
<td colspan="2"></td></tr>
</table>
</div><!--end contact form-->
</div><!--end left-->
</div><!--end main-->
</div><!--end container-->
<script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("name","req","Please enter your name");
frmvalidator.addValidation("name","alpha_s","Alphabetic chars only");
frmvalidator.addValidation("number","maxlen=50");
frmvalidator.addValidation("number","req");
frmvalidator.addValidation("number","numeric_s", "Numbers only");
frmvalidator.addValidation("postcode","maxlen=50");
frmvalidator.addValidation("postcode","req");
frmvalidator.addValidation("postcode","numeric_s", "Numbers only");
frmvalidator.addValidation("email","maxlen=50");
frmvalidator.addValidation("email","req");
frmvalidator.addValidation("email","email");
//]]></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
</script>
<script src="js/load.js" type="text/javascript"></script>
</body>
</html>
"Name"被验证为"有内容",因为javascript从占位符文本中记录了"Name*"的值。(按照gen_validatorv4.js的第 1088 行进行操作 - objValue 具有占位符文本的值)。
此外,由于占位符文本有一个星号,这不是字母数字 - 因此它使该子句失败 - 因此您会看到您看到的消息。
所以,你是对的,占位符,当你作为"值"泵入输入时,必须在你验证时删除。您可以使用"form_submit_handler()"来执行此操作,方法是说"如果值与占位符相同,请在处理之前删除该值......并在事后恢复"
另一种选择是,我建议在 http://bassistance.de/jquery-plugins/jquery-plugin-validation/查看jQuery验证器 - 它更好地记录在案,因为你已经在运行jQuery。但是,您会遇到同样的问题,但是您可以使用预验证和验证后挂钩来调整值。只需根据 if ($('#contact_name').val() == '[placeholderText]') { $('#contact_name').val(''); } 进行切换
有点繁琐,但如果输入中必须有字段名称,那么这是一个解决方案。(还有其他涉及背景图形或半透明输入字段的解决方案。没有一个是完美的。