maya90
June 12, 2013, 10:18pm
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…
One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is...
Est. reading time: 2 minutes
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…
maya90
June 12, 2013, 10:52pm
2
forgot to mention, this also doesn’t work for the older browsers:
if ( $('#name').attr('value') === "your name" ) {
..........
}
maya90
June 13, 2013, 4:02am
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…
maya90
June 20, 2013, 6:49pm
4
oh man… no responses? still can’t find how to validate placeholder text in the older browses that don’t support placeholder…
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;
}
maya90
June 20, 2013, 8:09pm
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…
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…
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.
maya90
June 20, 2013, 8:50pm
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… well, thank you very very much…
fretburner:
In your ph.js file, you need to wrap the whole block of code in a document ready function:
$(function(){
// Your original code here
});
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.
maya90
June 20, 2013, 10:20pm
10
but I did…
http://mayacove.com/dev/val/js/ph.js
???
thank you for your help…