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>

Answer 1

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.