Formit validation problem still unsolved. Can anyone help?

62 Posts

jhewak Reply #1, 9 years, 9 months ago

Hi People,

Can anyone see an error here? The form won't validate any field. You can even submit an empty form. This has been an issue for over a year so I could really use a hand. Many thanks.

<div id="productForm">


  <p>[[!FormIt? &hooks=`email, formSuccess, redirect,FormItAutoResponder` &emailTpl=`sentEmailQuoteTpl` &emailSubject=`Online Quotation RE:  [[*pagetitle]]`  &emailFrom=`[email protected]` &emailFromName=`Breakaway Distributing` &emailTo=`[email protected]` &validate=`color:required, contact_name:required:minLength=`2`, contact_email:email:required, contact_message:required` &redirectTo=`[[~[[*id]]]]` &fiarTpl=`autoResponseToQuoteRequestTpl` &fiarSubject=`Quote request RE: [[*pagetitle]]`  &fiarToField=`contact_email`   &fiarFrom= `[email protected]` &fiarFromName=`Breakaway Distributing` &validate=`workemail:blank`]]</p>
  <p>Please fill out the form below to receive an email quote within one business day:<br />
    [[+placeholder]] </p>
  <form id="contactForm" class="cmxform" action="[[~[[*id]]]]" method="post" enctype="multipart/form-data">
    <div>
      <label for="color">Colour </label>
      <em>(required)</em> <b>Note:</b> Computer monitors render colours differently. If you have a particular <br />colour in mind, be sure to call and ask for a colour swatch.  <br />
      <input id="color" class="required" type="text" name="color" value="[[!+fi.color]]" size="15" maxlength="30" />
    </div>
    <div>Size <br />
      <table width="60%" border="0" cellspacing="1" cellpadding="1">
        <tbody>
          <tr>
            <td><label for="S">S<br />
              </label>
              <input id="S" type="text" name="S" value="[[!+fi.S]]" size="2" maxlength="4" /></td>
            <td><label for="M">M<br />
              </label>
              <input id="M" type="text" name="M" value="[[!+fi.M]]" size="2" maxlength="4" /></td>
            <td><label for="L">L<br />
              </label>
              <input id="L" type="text" name="L" value="[[!+fi.L]]" size="2" maxlength="4" /></td>
            <td><label for="XL">XL<br />
              </label>
              <input id="XL" type="text" name="XL" value="[[!+fi.XL]]" size="2" maxlength="4" /></td>
            <td><label for="2XL">2XL<br />
              </label>
              <input id="2XL" type="text" name="2XL" value="[[!+fi.2XL]]" size="2" maxlength="4" /></td>
            <td><label for="3XL">3XL<br />
              </label>
              <input id="3XL" type="text" name="3XL" value="[[!+fi.3XL]]" size="2" maxlength="4" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <p>
        <label for="screen">Screen Printing </label>
        <img class="alignleft" src="assets/images/t-shirt_front.jpg" alt="shirt" width="186" height="176" />
        <input id="screen" type="checkbox" name="screen" value="[[!+fi.screen]]" size="30" />
        <label><br />
          Front <br />
          <select id="front" name="front" size="1">
            <option value="0">No colours</option>
            <option value="1">1 colour</option>
            <option value="2">2 colour</option>
            <option value="3">3 colour</option>
            <option value="4">4 colour</option>
            <option value="5">5 colour</option>
            <option value="6">6 colour</option>
            <option value="7">7 colour</option>
            <option value="8">8 colour</option>
          </select>
        </label>
        <label><br />
          Back<br />
          <select id="back" name="back" size="1">
            <option value="0">No colours</option>
            <option value="1">1 colour</option>
            <option value="2">2 colour</option>
            <option value="3">3 colour</option>
            <option value="4">4 colour</option>
            <option value="5">5 colour</option>
            <option value="6">6 colour</option>
            <option value="7">7 colour</option>
            <option value="8">8 colour</option>
          </select>
          <br />
        </label>
        <label>Left Sleeve<br />
          <select id="leftsleeve" name="leftsleeve" size="1">
            <option value="0">No colours</option>
            <option value="1">1 colour</option>
            <option value="2">2 colour</option>
            <option value="3">3 colour</option>
            <option value="4">4 colour</option>
            <option value="5">5 colour</option>
            <option value="6">6 colour</option>
            <option value="7">7 colour</option>
            <option value="8">8 colour</option>
          </select>
          <br />
        </label>
        <label>Right Sleeve <br />
          <select id="rightsleeve" name="rightsleeve" size="1">
            <option value="0">No colours</option>
            <option value="1">1 colour</option>
            <option value="2">2 colour</option>
            <option value="3">3 colour</option>
            <option value="4">4 colour</option>
            <option value="5">5 colour</option>
            <option value="6">6 colour</option>
            <option value="7">7 colour</option>
            <option value="8">8 colour</option>
          </select>
        </label>
      </p>
      <p> </p>
      <label for="embroidery">Embroidery</label>
      <input id="embroidery" type="checkbox" name="embroidery" value="[[!+fi.embroidery]]" size="30" />
      <label> </label>
      <label> </label>
      <label>Embroidery Locations
        <select id="embroiderylocations" name="embroiderylocations">
          <option value="0">No locations</option>
          <option value="1">1 location</option>
          <option value="2">2 locations</option>
          <option value="3">3 locations</option>
          <option value="4">4 locations</option>
        </select>
      </label>
      <br />
      <div>
        <label for="contact_name">Name </label>
        <em>(required, at least 2 characters)</em><br />
        <input id="contact_name" class="required" type="text" name="contact_name" value="[[!+fi.contact_name]]" size="30" />
      </div>
      <div>
        <label for="contact_email">E-Mail </label>
        <em>(required)</em><br />
        <input id="contact_email" class="required email" type="text" name="contact_email" value="[[!+fi.contact_email]]" size="30" />
      </div>
      <div>
        <label for="contact_phone_NA_format">Phone </label>
        <em>(optional)</em><br />
        <input id="contact_phone_NA_format" class="phone" type="text" name="contact_phone_NA_format" value="[[!+fi.contact_phone_NA_format]]" size="14" maxlength="14" />
        <label for="contact_ext_NA_format">ext. </label>
        <input id="contact_ext_NA_format" class="ext" type="text" name="contact_ext_NA_format" value="[[!+fi.contact_ext_NA_format]]" size="5" maxlength="5" />
      </div>
      <div>
        <label for="contact_attachment">Attach a File </label>
        <em>(optional<em> - max file size 5MB</em>)</em><br />
        <input id="contact_attachment" type="file" name="contact_attachment" value="[[!+fi.contact_attachment]]" />
      </div>
      <div>
        <label for="contact_message">Your comment </label>
        <em>(required)</em><br />
        <textarea id="contact_message" class="required" name="contact_message" rows="7" cols="40">[[!+fi.contact_message]]</textarea>
<input type="hidden" name="workemail" value="" />

      </div>
      <div>
        <input class="submit" type="submit" name="submit" value="Submit" />
      </div>
    </div>
  </form>
</div>

This question has been answered by multiple community members. See the first response.

[ed. note: smashingred last edited this post 9 years, 9 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 9 years, 9 months ago

It helps to lay out the FormIt call so you can more easily see what you have, which in this case includes two &validate property sets. I can't say it that is what has broken your FormIt validation, but it certainly isn't helping it any. And I don't see what purpose your redirection is having, since it'll re-load the current page anyway.

[[!FormIt? 
  &hooks=`email,formSuccess,redirect,FormItAutoResponder` 
  &emailTpl=`sentEmailQuoteTpl` 
  &emailSubject=`Online Quotation RE:  [[*pagetitle]]`  
  &emailFrom=`[email protected]` 
  &emailFromName=`Breakaway Distributing` 
  &emailTo=`[email protected]` 
  &validate=`color:required, 
  	contact_name:required:minLength=`2`, 
	contact_email:email:required, 
	contact_message:required` 
  &redirectTo=`[[~[[*id]]]]` 
  &fiarTpl=`autoResponseToQuoteRequestTpl` 
  &fiarSubject=`Quote request RE: [[*pagetitle]]`  
  &fiarToField=`contact_email`   
  &fiarFrom= `[email protected]` 
  &fiarFromName=`Breakaway Distributing` 
  &validate=`workemail:blank`
]]

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

discuss.answer

MODX Staff
2,502 Posts

Jay Gilmore Reply #3, 9 years, 9 months ago

For clarity I am posting your FormIt call here as you have it:

[[!FormIt? &hooks=`email, formSuccess, redirect,FormItAutoResponder` &emailTpl=`sentEmailQuoteTpl` &emailSubject=`Online Quotation RE:  [[*pagetitle]]`  &emailFrom=`[email protected]` &emailFromName=`Breakaway Distributing` &emailTo=`[email protected]` &validate=`color:required, contact_name:required:minLength=`2`, contact_email:email:required, contact_message:required` &redirectTo=`[[~[[*id]]]]` &fiarTpl=`autoResponseToQuoteRequestTpl` &fiarSubject=`Quote request RE: [[*pagetitle]]`  &fiarToField=`contact_email`   &fiarFrom= `[email protected]` &fiarFromName=`Breakaway Distributing` &validate=`workemail:blank`]]

and line formatted:

[[!FormIt? 
    &hooks=`email, formSuccess, redirect,FormItAutoResponder` 
    &emailTpl=`sentEmailQuoteTpl` 
    &emailSubject=`Online Quotation RE:  [[*pagetitle]]`  
    &emailFrom=`[email protected]` 
    &emailFromName=`Breakaway Distributing` 
    &emailTo=`[email protected]` 
    &validate=`color:required, contact_name:required:minLength=`2`, contact_email:email:required, contact_message:required` 
    &redirectTo=`[[~[[*id]]]]` 
    &fiarTpl=`autoResponseToQuoteRequestTpl` 
    &fiarSubject=`Quote request RE: [[*pagetitle]]`  
    &fiarToField=`contact_email`   
    &fiarFrom= `[email protected]` 
    &fiarFromName=`Breakaway Distributing` 
    &validate=`workemail:blank`
]]

The first thing I note is you have two validate properties listed with different values. The second thing I notice is that you are redirecting back to the original page in the call which is not necessary as that should be the default form action. I'd lose the redirect altogether. Not sure what the formSuccess hook is about. This, to me seems like something that's redundant considering FormIt has built in success handling.

Furthermore, there is no error messaging included for your required fields. You need to include the error placeholders, i.e., [[!+fi.error.color]]. Take a look at the example here: http://rtfm.modx.com/extras/revo/formit/formit.tutorials-and-examples/formit.examples.simple-contact-page it's possible the validation is working but there's no errors being displayed because the placeholders are absent.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 9 years, 9 months ago

Yeah, as soon as I move that second validate property value into the first property, validation appears to work as expected. I didn't mess with any of the other stuff, nor did I try to actually get a mailing out of it - just checking for validation.

I did add this line, to get a visible validation error response

[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

62 Posts

jhewak Reply #5, 9 years, 9 months ago

Thank you sottwell and Jay for your time and expertise. I will follow your advice and let you know.

62 Posts

jhewak Reply #6, 9 years, 9 months ago

So I had success! Great thanks. So how do I change the error message?

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 9 years, 9 months ago

That's from the lexicon files. System -> Lexicon Management, the choose the formit namespace, the default topic, and your language. Edit the fields by double-clicking on them, then click outside the field to save.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

62 Posts

jhewak Reply #8, 9 years, 9 months ago

great. It's all working now. Grateful.

MODX Staff
2,502 Posts

Jay Gilmore Reply #9, 9 years, 9 months ago

i've made this into a question type post and you can mark one or more of the answers the solution by starring it in the upper right hand corner of the post. Hover the post to see the star.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

Answered Formit validation problem still unsolved. Can anyone help?