I'm not sure if this is the BEST way (or even vaguely the correct way)
to fix this, but I seem to have solved my own problem.
I changed the jQuery/Validate code to the following:
$(document).ready(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
rules: {
contactName: {
required: true,
minlength: 2
},
contactEmail: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
}
},
messages: {
contactName: "Please enter your name (2 character
minimum)",
contactEmail: "Please enter a valid email address",
message: "Please enter your message (2 character
minimum)"
},
errorPlacement: function(error, element) {
element.siblings("label").children("span.error").html("
" +
error.text());
},
success: function(label){
label.html("");
},
submitHandler: function(form) {
form.submit();
}
});
$("#reset").click(function(){
$("span.error").html("");
});
});
Basically, I changed the "success" function (I re-read the options/
example for this and saw a potential error) and added in the
"submitHandler" function (which I think is redundant, since it SHOULD,
theoretically, trigger the form.submit by itself, but I figured it
didn't hurt to be explicit).
The additional "#reset" click function was needed to remove the error
labels when the user clicks the "Reset" button on the form, as they
were staying put before.
Sorry for the post, followed by the quick retraction, but maybe this
will help someone else. OR... maybe someone can point out a better
way. :D
Thanks.
- John
On Jul 17, 3:34 pm, bcbounders <bcbound...@gmail.com> wrote:
> I've got weird behavior on the contact form at this
> address:http://tinyurl.com/myy8gp'
>
> The initial validation works (i.e. leave all fields blank and click
> submit). If you then enter anything valid into any one of the
> required fields and click submit again, the jQuery validation doesn't
> seem to occur again (or, if it does, it passes everything even though
> other required fields are not valid) and it passes everything to the
> PHP file for processing.
>
> Here is the code for the form:
> <form id="contactForm" method="post" action="contact-us_assets/contact-
> us.php">
> <fieldset>
> <p>
> <label for="contactName">Name: <span
> class="reqField">*</span><span
> class="error reqField"></span></label>
> <input class="text" size="45" id="contactName"
> name="contactName" /
>
> </p>
> <p>
> <label for="contactEmail">Email: <span
> class="reqField">*</
> span><span class="error reqField"></span></label>
> <input class="text" size="45" id="contactEmail"
> name="contactEmail" />
> </p>
> <p>
> <label for="contactPhone">Phone:</label>
> <input class="text" type="text" size="25"
> name="contactPhone"
> id="contactPhone" />
> </p>
> <p>
> <label for="contactCompany">Company:</label>
> <input class="text" size="45" name="contactCompany"
> id="contactCompany" />
> </p>
> <p>
> <label for="subject">Subject:</label>
> <input class="text" type="text" size="25"
> name="subject"
> id="subject" />
> </p>
> <label for="message">Message: <span
> class="reqField">*</span><span
> class="error reqField"></span></label>
> <textarea class="text" cols="50" rows="5"
> name="message"
> id="message"></textarea>
> </p>
> <p>
> <input class="submit" type="submit" name="submit"
> value="Submit" /> <input class="reset" type="reset" name="reset"
>
> value="Reset" />
> <span class="footNote reqField">*Required
> Fields</span>
> </p>
> </fieldset>
> </form>
>
> And here is the jQuery code for the Validation Plugin:
>
> $(document).ready(function() {
> // validate contact form on keyup and submit
> $("#contactForm").validate({
> rules: {
> contactName: {
> required: true,
> minlength: 2
> },
> contactEmail: {
> required: true,
> email: true
> },
> message: {
> required: true,
> minlength: 2
> }
> },
> messages: {
> contactName: "Please enter your name (2 character
> minimum)",
> contactEmail: "Please enter a valid email address",
> message: "Please enter your message (2 character
> minimum)"
> },
> errorPlacement: function(error, element) {
>
> element.siblings("label").children("span.error").html(" " +
> error.text());
> },
> success: function(error, element){
>
> element.siblings("label").children("span.error").text("");
> }
> });
>
> });
>
> I appreciate any insight into what could be going wrong, as I'm
> stumped.
>
> Thanks a lot!
>
> - John
