Forums

standuncan

I have a small form where I cannot use labels, so I am using placeholders as labels. For the older browsers (this site has old IE users) I have installed a jQuery snippet to use the same placeholders, however now those placeholders pass the validation. Anyway around this?

form:



<?php echo $errors['name']; ?><input value="<?php echo $_POST['name']; ?>" type="text" name="name" id="name" placeholder="Name" tabindex="1">

php



if(!empty($_POST)){
	
	$name = stripcleantohtml($_POST['name']);
	
	$errors = array();
	
	//Check the form fields
	if(empty($name)){
		$errors['name'] = '<span class="error">*</span>';
	}

jQuery



if (!("placeholder" in i)) {
	$("input[placeholder]").each(function () {
		var self = $(this);
		self.val(self.attr("placeholder")).bind({
			focus: function () {
				if (self.val() === self.attr("placeholder")) {
					self.val("");
				}
			},
			blur: function () {
				var label = self.attr("placeholder");
				if (label && self.val() === "") {
					self.val(label);
				}
			}
		});
	});
}

standuncan

Ughh, I never see the sections when I post, they always end up int he wrong spot :/

My bad!

TT_Mark

So it's passing the PHP validation? My guess would be that the best thing to do is compare the POST value of the fields to the placeholder that was in them. If they match, or maybe if the first bit of it matches as they could delete one character from the end then the form fails validation

standuncan

Yes, in IE due to the jQuery placeholder script, the actual placeholder "Name" (and others) pass validation, since I am only checking to see if the input has a string in it. This does not happen on email, because I am also checking to see if it is a valid email. I'm not 100% sure I understand what you're saying. Can you explain it again or show an example for me please?

standuncan

This site was pushed live, (not up to me), and it has an adwords account, so it is getting traffic now. Some of the forms coming in are:

Name: John Doe

Phone: Phone <-- placeholder

Email: example@email.com

etc. Any help would be appreciated.

Mottie

I'm confused, if it is PASSING validation. then what is the problem?

If you mean that is isn't passing, then maybe put the placeholder content into the "alt" attribute, and if placeholder is supported in the browser, then copy the alt value over to placeholder.

Input

<?php echo $errors['name']; ?><input value="<?php echo $_POST['name']; ?>" type="text" name="name" id="name" alt="Name" tabindex="1">

Script

// check if the browser supports placeholder
if (typeof(document.createElement('input').placeholder) !== 'undefined'){
  // yes it does!
  $('input[alt]').each(function(){
    this.placeholder = this.alt;
  });
} else {
  // no it doesn't, add your placeholder plugin here
  // but pull the placeholder value from the alt
}

standuncan

I tried what @TT_Mark said after a lot trying to figure out how and I came up with this, but don't know if it is correct? It seems to be working though...

Any thoughts?

html:



<?php echo $errors['name']; ?><input value="<?php echo $_POST['name']; ?>" type="text" name="name" id="name" placeholder="Name" tabindex="1">

php:



if(empty($name)){
	$errors['name'] = '<span class="error">Enter</span>';
} else {
	if (is_string("Name")) {
		$errors['name'] = '<span class="error">Enter your name</span>';
		}
	}

standuncan

and for some reason this was working on 1 input, but not another, so then I tried this and it seems to be working for the most part too. Are either of these even correct?



if(empty($phone)){
	$errors['phone'] = '<span class="error">*</span>';
} else {
	if ($phone = "Phone") {
		$errors['phone'] = '<span class="error">Enter your phone</span>';
		}
	}

standuncan

Just in case anyone further reads or cares lol

I got it right above pretty much, but had the wrong assignment operator instead of the comparison operator.

Got it working now :D



if(empty($name)){
	$errors['name'] = '<span class="error">*</span>';
} else {
	if ($name == "Name") {
		$errors['name'] = '<span class="error">*</span>';
		}
	}

Mottie

YAY!

treehouse : what would you like to learn today?

Forums

jQuery placeholder in IE passing validation...