I have a php form with a jquery validator script that is only validated two out of the four required fields. The two fields that are been validated are the name and the email although if you don’t input anything – the error message says ‘Alphabetic chars only’ rather than ‘Please enter your name”. The design required that I put the name of each field as a placeholder in the form and I am not sure if this is why it is not working properly. To balance that out – I put the name of each field outside the form and then hid it with a css span class of display none but the script is still not picking it up. Any Suggestions?
<?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” gets validates as “has content” as the javascript records a value of “Name*” from the placeholder text. (Follow through in line 1088 of gen_validatorv4.js – objValue has a value of the placeholder text).
Also, as the placeholder text has an asterisk, this is not an alpha numeric – so it fails that clause – hence you see the message you see.
So, you’re right, the placeholders, when pumped into the INPUT as “values” must then be removed when you validate. You could probably do this with “form_submit_handler()” by saying “if the value is the same as the placeholder, remove hte value before processing… and restore afterwards”
Another option is that I’d suggest looking at the jQuery validator at http://bassistance.de/jquery-plugins/jquery-plugin-validation/ – it’s better documented as you’re already running jQuery. You’ll have the same problem, though, but there are pre-validation and post-validation hooks you can use to adjust the values. Just switch based on if ($(‘#contact_name’).val() == ‘[placeholderText]’) { $(‘#contact_name’).val(”); }
A bit fiddly, but if you MUST have field names inside inputs, then that’s a solution. (There are also other solutions involving background graphics or semi-transparent input fields. None are perfect.)