Placeholder ----- how to validate for older browsers

JavaScript
1

when you use placeholder property in a form, how do you do form validation for browsers that don’t support placeholder property?

this


if (  $('#name').attr('value')  === "") {
    ...........
}

doesn’t work in older browsers, because whatever is in there (even if it’s just placeholder) it reads as a value…

I have tried numerous things… taking placeholder code from here…

I tried various little hacks, like…


if (  $('#name').attr('value')  === "" || $('#name').attr('placeholder') === "your name") {
    ...........
}

but it also doesn’t work in browsers that don’t recognize placeholder property…

I have an example here,
http://mayacove.com/dev/val/val.html

when I tested last in IE, this morning (which I can’t do now) this was not working at all in IE7, 8, or even 9…

would appreciate suggestions…

thank you…

2

forgot to mention, this also doesn’t work for the older browsers:

if (  $('#name').attr('value')  === "your name" )  {
      ..........
}
3

I just realized I can use property “required” in form elements for the newer browsers… but still have prob of validation for the older browsers…

(do all the jQuery placeholder plugins out there also deal with validation for older browsers? (that read placeholder text as if it were text filled out by the user? (if I did validation server-side i would have the same problem with the older browsers and placeholders…)

thank you…

PS: if you click on “what’s the value” button near the bottom of the page here
http://mal.co.nz/code/jquery-placeholder/

in IE7, 8, or 9, what happens?

thank you…

4

oh man… no responses? still can’t find how to validate placeholder text in the older browses that don’t support placeholder…:frowning:

5

Hi maya90, I think I’ve got a solution for you. This works for me in IE7.

In your ph.js file, you need to wrap the whole block of code in a document ready function:

$(function(){

    // Your original code here

});

Next, open up val.js and change the code here:

if(!Modernizr.input.placeholder){
    console.log('no placeholder' );  // Remove or comment out this line, as IE doesn't like it.
}

and here:

function validate() {
	
	var sName   = $('#name').attr('value');
	var sEmail  = $('#email').attr('value');
	var sMsg    = $('#msg').attr('value');
	
//	fallback for older browsers...
	var pHName  = $('#name').attr('placeholder');  // These three values are not needed anymore
	var pHEmail = $('#email').attr('placeholder');
	var pHMsg   = $('#msg').attr('placeholder');
	
	if (sName === "" || sName === "your name") {	// Second condition changed from pHName to sName
	$('.error').css('display','none');
		$('#error_name').css('display','block');
		ff();
		return false;
	}
	if (sEmail === "" || sEmail === "your email address") {
		$('.error').css('display','none');
		$('#error_email_empty').css('display','block');
		$('#email').focus();
		return false;
	}
	if (sEmail != "" && !checkEmail(sEmail)) {
		$('.error').css('display','none');
		$('#error_email_syntax').css('display','block');
		return false;
	}	
	
	 if (sMsg === "" || sMsg === "your message") {  // Second condition changed from pHMsg to sMsg
		$('.error').css('display','none');
		$('#error_msg').css('display','block');
		$('#msg').focus();	
		return false;
	}

	return true;
}
6

thank you so much!!

I made the corrections you suggested (can’t believe I had forgotten the “load” wrapper fn in the jQuery… what a jerk…:wink:

can you see if it works now in older browsers, please?? I can’t test on older browsers now…
http://mayacove.com/dev/val/val.html

thank you very much…

7

Your site works fine for me now in IE7, except for one other small bug I just noticed. You need to change the validate call in your page like this:

$('#submitBtn').click(function() {
    if(validate()) {
        $('#mailForm').submit();
    }
});

otherwise the form doesn’t actually get submitted, even if it’s valid.

8

oh man… that’s right… and in my “real” page I have it just like that… don’t know what made me do it like this here…

ok, just pushed again… if you could look one mo’ time I would appreciate it very much…
http://mayacove.com/dev/val/val.html

so in the end it was all due to my own errors… oh man…:frowning: well, thank you very very much…

9

You only ever need to do that if you put your JavaScript in the wrong place in the page. If you place all your JavaScript directly before the </body> tag where it belongs then you will never need to add that test.

10

but I did…

http://mayacove.com/dev/val/js/ph.js

???

thank you for your help…

11