[jQuery] Problem with Form and Validate plugins
Ok, this is my last resort, as I've been working on this for a while
and am completely stumped. I'm probably just doing something stupid
that I haven't noticed, so maybe a fresh pair of eyes would help.
Essentially my problem is this: on this website I'm developing, users
can submit photos for a monthly contest. I'm using the Lightbox plugin
with prototype and script.aculo.us to display winners from the past
few months, and the Validate and Form plugins for jQuery to display a
form where users upload their pictures. Thus, I have this in the head
of my document:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?
load=effects,builder"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></
script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<script type="text/javascript" src="js/ajax_upload.js"></script>
The ajax_upload file contains the following script:
jQuery(document).ready(function($){
$("#submitphoto").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
upload: {
required: true
},
message: "required"
},
messages: {
firstname: "Please enter your first name.",
lastname: "Please enter your last name.",
email: "Please enter a valid email address.",
topic: "Please select a photo to upload."
},
submitHandler: function(form) {
options1 = {
target: '#lowernav_middle',
iframe: true,
beforeSubmit: function() { $("#lowernav_middle").html('<img
src="images/ajax-loader-regular.gif" alt="Loading..." id="loading" /