Search code examples
formsvalidationmodxmodx-revolutionformit

MODX FormIt validation checks only `required`


I have a contact form on my site. I use formit for its FormIT validation. I want email be not more than 40 characters, be reqired and be correct email address. Message field is required too and has max length set.

Validator doesn't work correctly:

  • When required fields are empty, it shows error message and doesn't allow to send the form (this situation is absolutely correct)
  • When in email is any text (valid or not), form is sent but redirect to success page doesn't work (so it happens also when we enter more than max length)

        [[!FormIt?
        &hooks=`spam,email,redirect,FormItAutoResponder`
        &emailTpl=`emailTplContact`
        &emailSubject=`Message from site.com`
        &emailTo=`[email protected]`
        &validate=`email:email:required:maxLength=^40^,
                   message:required:maxLength=^150^`
        &redirectTo=`11`
        &fiarTpl=`emailAutoRespond`
        &fiarSubject=`Your message is sent`
        &fiarFromName=`My Site`
        &fiarFrom=`[email protected]`
        &fiarToField=`email`
        &fiarReplyTo=`email`
        ]]
    
        <form id="contact-form" method="post" action="[[~[[*id]]]]" enctype="application/x-www-form-urlencoded" role="form" data-toggle="validator" name="order">
          <input type="text" id="name" name="name" type="name" placeholder="Name" value="[[!+fx.name]]" size=25>
          <input type="text" required="required" type="email" id="email" name="email" placeholder="Email" value="[[!+fx.email]]">
          [[!+fx.error.email]]
          <textarea required="required" placeholder="Message" id="message" name="message">[[!+fx.message]]</textarea>
          <button name="send">Send</button>
        </form>
      </div>
    

Solution

  • You have type attribute twice in the name input and the email input, so that might be the problem.

    <input type="text" id="name" name="name" type="name">
    <input type="text" required="required" type="email">
    

    Remove type="name" and type="email" -- (leave type="text")

    Also - I have only ever used a prefix of fi for Formit placeholders; do you know for sure that fx will work? Did you set that somewhere else? You say you're seeing the error message so I guess the error placeholder must be working...

    Be sure to add placeholderPrefix to your FormIt call:

    [[!FormIt?
        &placeholderPrefix=`fx`
        &hooks=`spam,email,redirect,FormItAutoResponder`
        &emailTpl=`emailTplContact`
        &emailSubject=`Message from site.com`
        &emailTo=`[email protected]`
        &validate=`email:email:required:maxLength=^40^,
               message:required:maxLength=^150^`
        &redirectTo=`11`
        &fiarTpl=`emailAutoRespond`
        &fiarSubject=`Your message is sent`
        &fiarFromName=`My Site`
        &fiarFrom=`[email protected]`
        &fiarToField=`email`
        &fiarReplyTo=`email`
    ]]