Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nicoalexa
nicoalexa
5,028 Points

jQuery Form Validation Tab and IE10 issues

Hi there, I'm very new to JavaScript/jQuery and decided to try and modify the code from Andrew Chalkley's e-mail validation segment for a project I'm working on. I'm having some trouble getting it to work in a few cases and any help would be greatly appreciated! What I wanted to do was to have the "Please enter a valid e-mail" message fade in when focusing on the e-mail field and then remain until the user enters a valid e-mail address. I was able to partially accomplish this but I've encountered two problems:
(1) If the user enters their e-mail using auto-fill then tabs to the next field the message remains. I'm thinking this is because the focus is changing to the next field before the keyup event happens but I'm not sure. (2) In IE10 the submit button will not work even if all fields have been populated correctly. The jquery.js and validEmail.js files I'm using are the same ones from the project and the only thing I've changed is the script in the actual contact.html page. Here is my code: 

<script type="text/javascript">
    var $submit = $(".submit input");
    var $required = $(".required");

    function containsBlanks(){
        var blanks = $required.map(function(){ return $(this).val() == "";});
        return $.inArray(true, blanks) != -1;
    }

    function requiredFilledIn(){
        if(containsBlanks() || !$("#email").validEmail()) 
            $submit.attr("disabled","disabled");
        else 
            $submit.removeAttr("disabled");
    }

    $("#form span").hide();

    $("#email")
        .keyup(function(){requiredFilledIn();})
        .validEmail({
            on:"keyup",
            success:function(){$(this).next().fadeOut("slow");},
            failure:function(){$(this).next().fadeIn("slow");}
        });

    requiredFilledIn();
</script>

2 Answers

klam tine
klam tine
15,524 Points
klam tine
klam tine
15,524 Points

  1. I suppose you are binding 'keyup' event twice, to the $('#email') Object. There is one 'keyup' right after it, and yet another in it's method 'valideEmail', have no ideas how's the method working.

  2. jQuery did a gr8 job working across different browsers, which you can find HERE. IE won't let extra comma in JS constructor like this:

var Test = {
    init: function () {
        //do something
    },

    end: function() {
        //something else here
    }, // <= Notice Extra comma?
}
nicoalexa
nicoalexa
5,028 Points

Thanks for your input. I was able to get the code working in IE so that's one problem solved! I also fixed some other problems with the multiple keyup events and a missing event but am still having the problem of the success event not happening if I tab to the next field after entering the e-mail instead of pressing enter.

This is the updated code:

 var $submit = $(".submit input");
        var $required = $(".required");
        function containsBlanks(){  
            var blanks = $required.map(function(){return $(this).val() == "";});
            return $.inArray(true, blanks) != -1;
        }
        function requiredFilledIn(){
            if(containsBlanks() || !$("#email").validEmail()) 
                $submit.attr("disabled","disabled");
            else 
                $submit.removeAttr("disabled");
        }
        $("input,textarea").keyup(function(){requiredFilledIn();});

        $("#email").validEmail({on:"keyup", success:function(){
                $(this).next().fadeOut("slow");
            }, failure:function(){
                $(this).next().fadeIn("slow");
            }});
        requiredFilledIn();
nicoalexa
nicoalexa
5,028 Points
nicoalexa
nicoalexa
5,028 Points

Sorry accidentally posted here and couldn't delete. Please ignore this Answer.