6

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.

  • 1
    Try popping the sample Email Contact Form code into a template (expressionengine.com/user_guide/modules/email/contact_form.html). Does it send? – Anna_MediaGirl Nov 16 '12 at 23:20
  • As stated above, the forms send without the watermark & validation plugins. Just can't figure out why they won't submit with the plugins in place. – Jmorriso Nov 17 '12 at 13:05
  • That wasn't clear to me... So next question I have, if you remove validate() and leave watermark() does it process? If you remove watermark() and leave validate() does it process? Will help to narrow down which jQuery plugin is causing the problem. – Anna_MediaGirl Nov 18 '12 at 18:18
  • out of curiosity what's the reason behind using this: onsubmit="return validate('#comment_form'); ? – Natetronn Nov 18 '12 at 22:38
  • @MediaGirl- It's the validate plugin & the native EE form that aren't playing nice together so far as I can tell. adding/removing Watermark doesn't change anything. Validate is working as expected but EE's own validation is failing when the Jquery Validate plugin is present. – Jmorriso Nov 19 '12 at 13:47
4

... when the form fields are filled out correctly ExpressionEngine itself throws an "x Field Required" error message("Email Field Required" for the Comment Form ...

The comment form code that you've posted includes a from field, not an email field. It seems pretty likely that EE is looking for $_POST['email'] and then bailing when it can't find it. The jQuery issues might just be a red herring.

  • 1
    I concur with Dom. From the EE docs (expressionengine.com/user_guide/modules/comment/…) "There are a few variables that are required in order to enable people’s personal information (name, email, url, etc.) to appear in the form." – Patrick Pohler Nov 21 '12 at 15:09
  • Yup. This fixed the comment form behavior. Now it's all silky smooth. Did not fix the email contact form, but as that's a more complicated case (it's accessed from an ajax-loaded menu, etc) I'm going to go ahead and mark this one as answered, and ask about the contact form's use case in a separate question. Thanks so much for catching that! – Jmorriso Nov 21 '12 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.