Jquery Validation not working on import of Galleria script

Question

I'm putting together a basic site with a Galleria library, hide/show and validated form. The validation on my basic feedback form is failing when I load the Galleria script.

What causes might stop the JQuery validation script from running when I also load Galleria script into the page? Validation works fine when Galleria is not loaded, but fails when it is. Live site here: http://lucidnetdesigns.com/invidia/ Here's the current imports and script:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="galleria/galleria-1.2.7.min.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>

<script type="text/javascript">

   Galleria.loadTheme('galleria/themes/twelve/galleria.twelve.min.js');
    Galleria.run('#galleria', {
    fullscreenCrop: 'false',
    autoplay: 3000,
    imageCrop: true
});

            $(document).ready(function() {
                $('#content_salon').hide();

                $('a#show_content_salon').click(function () {
                    $('#content_salon').slideToggle('slow');
                    return false;
                });
            });

            $(document).ready(function () {
                $('#content_services').hide();

                $('a#show_content_services').click(function () {
                    $('#content_services').slideToggle('slow');
                    return false;
                });

            });

            $(document).ready(function () {
                $('#content_contactus').ahow();

                $('a#show_content_contactus').click(function () {
                    $('#content_contactus').slideToggle('slow');
                    return false;
                });
            });


$(document).ready(function(){
    $("#form1").validate({

    rules: 

    {

      email1: "required",
       email2: {
              equalTo: "#email1" },

      phone: {
        minlength: 10,
        maxlength: 10
      },

      fullname: {
        minlength: 2
      },


    },

    messages: { 

    name: "Please enter your full name.",
    email1: "Please enter a valid email.",
    phone: "Phone number must be 10 characters (include area code).",
    },

    errorPlacement: function(error, element) { 
            error.appendTo( element.parent() ); 
        }
  });

});
  </script>

Have you looked at any of your console errors yet? The very first one is: "`$('#content_contactus').ahow` is not a function" ~ Perhaps you meant `show` instead of `ahow`? — Sparky, Feb 18 '13 at 20:09
You should also include the relevant HTML for your form in the OP. Thanks. — Sparky, Feb 18 '13 at 20:14
After digging into this, it's clear that your whole problem is caused by the JavaScript errors which are caused by the various spelling mistakes. You'll need to get Galleria working without errors before you can expect any JavaScript to function. — Sparky, Feb 18 '13 at 20:58

Sparky · Accepted Answer · 2013-02-18T20:43:55.370

I'm seeing lots of spelling mistakes on your page.

A per your OP, these are your rules...

rules:  {
      email1: "required",
      email2: {
          equalTo: "#email1" 
      },
      phone: {
          minlength: 10,
          maxlength: 10
      },
      fullname: {  // <-- no such field defined
          minlength: 2
      }
},
messages: { 
    name: "Please enter your full name.",  // <-- no such field or rule
    email1: "Please enter a valid email.",
    phone: "Phone number must be 10 characters (include area code).",
},

However, as per your page, there is no such field called fullname. Your actual HTML is this:

<input name="firstname" ....

And in your messages section, you defined a message for name but there is no field in your form with name="name", nor is there any rule called name.

Your Validation code is working: http://jsfiddle.net/zPQJb/

Side note: There is no reason to have class="require" on an input field when you've already specified a compound rule within .validate() containing required. It's redundant.

The very first error on your page:

"$('#content_contactus').ahow is not a function"

ahow is probably supposed to be show.

You'll need to resolve this as well as the dozens of other JavaScript errors on your page, (seemingly caused by many spelling errors), before you can expect any of the remaining JavaScript to function properly.

Guys - thanks - I'm relative noob to this stuff so having your diligence to drive me to neater code is great. I was playing with show/hide and clearly mispelt the 'show' instead of ahow. Thanks for other tips - I will updated and test. Best, Nick — Nick Balcombe, Feb 19 '13 at 08:15
Update - the correction of 'ahow' to 'show' actually resolved my original issue. I will now fix the rest :) — Nick Balcombe, Feb 19 '13 at 08:20

Jquery Validation not working on import of Galleria script

1 Answers1