Form validation code not working correctly

Question

Ok I have been working through the interactive website project and all been going fine until I got to the form validation. I got the code in to validate the email by seeing there is a @ present but then when it came to the required fields code something has gone wrong and now form span text is always present! I have scanned my code and cant see where I have messed up can anyone else help??

<script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            var $submit = $(".submit input");
            var $required = $(".required");
            function containsBlanks(){
                var blanks = new Array();
                $required.each(function(){
                    blanks.push($(this).val() == "");
                });
                return blanks.sort().pop();
            }

            function isValidEmail(email){   
                return email.indexOf("@") != -1;
            }

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

            $("#form span").hide();
            $("input,textarea").focus(function(){
                $(this).next().fadeIn("slow");
            }).blur(function(){
                $(this).next().fadeOut("slow");
            }).keyup(function(){
                //Check all required fields.
                requiredFilledIn();
            });

            $("#email").keyup(function(){
                //Check for a valid email.
                if(isValidEmail($(this).val())); 
                $(this).next().removeClass("error").addClass("valid");
                else 
                $(this).next().removeClass("valid").addClass("error");
            });
            requiredFilledIn();

        </script>

Thanks

Answer 1 · 2014-02-12T17:41:16Z

February 12, 2014 5:41pm

Once you have created the function, you must declare a new array, then select all inputs with a class of ".required". This will then assign the selected elements to a jQuery object, then a method can be called to go over every element and carry out the required actions.

Inside this function add a value of the current element to the created array. The best way of doing sois by pushing the value onto the array (Push adds a new item to the end of an array). You can then access the value by calling .val() on $this.

I believe the following code would work.

var requiredValues = function()
{
     var myArray = new Array();
     $('.required').each(function()
     {
           myArray.push($(this).val());
     });
     return myArray;
}

Welcome to the Treehouse Community

Looking to learn something new?

Unsubscribed User

Unsubscribed User

Form validation code not working correctly

1 Answer

Callum Smith

Callum Smith

Unsubscribed User

Unsubscribed User