I'm using the jQuery Validate (https://github.com/jzaefferer/jquery-validation/tree/1.9.0) and Watermark (http://code.google.com/p/jquery-watermark/) plugins in conjunction with ExpressionEngine's (2.4.0) native contact and comment forms.
The validation and watermarking behaviors are working as expected (showing errors inline, on submit, when fields are left blank or filled out incorrectly), however, when the form fields are filled out correctly ExpressionEngine itself throws an "x Field Required" error message("Email Field Required" for the Comment Form "Email Message Required" for the Contact) on submit, obviously preventing the forms submission.
One important caveat is that the site, which is not yet live, does not use memberships. So while I can submit a comment when logged-in as super-admin, I cannot when testing as a regular "logged-out" user. Meanwhile I cannot send an email via the contact form in either scenario.
I've attempted adjustments to all the moving parts in this set-up that I can think of, without success, and so am left in a situation where I can either validate inline with my desired watermarking behavior or I can send the forms, not both. The complexity of these 3 interactions seems to handily outstrip my capacity to successfully troubleshoot, as I've spent days fiddling to no avail, so any and all ideas by the more enlightened are welcome.
EE comment form code as follows:
{exp:comment:form channel="obfuscated" form_id="comment_form" onsubmit="return validate('#comment_form');"}
<section class="commentformbox" id="commentformbox">
<input type="hidden" id="subject" class="subject" name="subject" size="40" required value="Comment Form"/>
<div class="inputbox"><input type="text" id="name" class="name" name="name"/></div>
<div class="inputbox"><input type="text" id="from" class="from" name="from"/></div>
<div class="inputbox"><input type="text" id="url" class="url" name="url"/></div>
<div class="textareabox"><textarea id="comment" name="comment"></textarea></div>
<input name="submit" class="submitbutton" type='submit' value='Submit Your Comment' style="cursor:pointer;"/>
</section>
{/exp:comment:form}
The hidden fields resolve as follows:
<form id="comment_form" method="post" action="http://www.obfuscated/index.php/obfuscated" onsubmit="return validate('#comment_form');" novalidate="novalidate">
<div class="hiddenFields">
<input type="hidden" name="ACT" value="1">
<input type="hidden" name="RET" value="http://www.obfuscated.com">
<input type="hidden" name="URI" value="obfuscated/permalink/obfuscated">
<input type="hidden" name="PRV" value="">
<input type="hidden" name="XID" value="obfuscated#s">
<input type="hidden" name="entry_id" value="7">
<input type="hidden" name="site_id" value="1">
</div>
And the validate & watermark call
$(document).ready(function(){
$('#name').watermark('Your Name',{useNative:false});
$('#from').watermark('Your Email',{useNative:false});
$('#url').watermark('Your Url (Optonal)',{useNative:false});
$('#comment').watermark('Your Comment'{useNative:false});
$("#comment_form").validate({
invalidHandler:$.watermark.showAll,
onfocusout:false,
rules:{
name:"required",
from:{required:true,email:true},
comment:"required"},
messages:{
name:"X",
from:"X",
comment:"X"},
ignore:"#url"
})
});
The email contact form is obviously slightly different, and also slightly more troublesome, but I thought I'd just start here for brevity.
I've tried removing other jQuery plugins present on the page, as well as a couple of EE plugins, without success. I have also already looked into solving this using Solspace's Freeform module and its Ajax settings, but as it seemed to require a re-think of some complex styling/behavior already in place I wanted to attempt to resolve this native implementation first, if possible.
Thanks for any help.
