Grow your CSS skills. Land your dream job.

jQuery placeholder in IE passing validation…

  • # October 21, 2011 at 3:19 pm

    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; ?>

    php



    if(!empty($_POST)){

    $name = stripcleantohtml($_POST);

    $errors = array();

    //Check the form fields
    if(empty($name)){
    $errors = '*';
    }

    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);
    }
    }
    });
    });
    }

    # October 21, 2011 at 7:58 pm

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

    My bad!

    # October 22, 2011 at 4:37 am

    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

    # October 24, 2011 at 1:06 pm

    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?

    # October 25, 2011 at 1:18 am

    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.

    # October 25, 2011 at 10:44 am

    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; ?>

    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
    }
    # October 26, 2011 at 3:34 pm

    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; ?>

    php:



    if(empty($name)){
    $errors = 'Enter';
    } else {
    if (is_string("Name")) {
    $errors = 'Enter your name';
    }
    }


    # October 26, 2011 at 4:14 pm

    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 = '*';
    } else {
    if ($phone = "Phone") {
    $errors = 'Enter your phone';
    }
    }

    # October 26, 2011 at 6:57 pm

    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 = '*';
    } else {
    if ($name == "Name") {
    $errors = '*';
    }
    }

    # October 26, 2011 at 9:14 pm

    YAY!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".