Hi, i'm running into an issue where the built in form generator/validator in CouchCMS is conflicting with html5 form validation.

It appears that adding required='1' to a field is being picked up by browsers as being an html5 attribute. This results in the browser taking over form validation before form elements are being validated by Couch on submit.

There's an option in html5 to disable browser form validation by adding 'novalidate' to the form tag, however this does not work in Couch. Couch strips the novalidate attribute from the form tag when added to <cms:form>.

Any suggestions on how to disable html5 validation in favor of Couch validation?

[KK]

Hi Vincent,

Could you please share your form's code?

Please see below. I left out some input fields (tel/comment etc), but the idea is the same.

Code: Select all

<cms:form action='contact.php' method='post' id='' class='form-horizontal' role='form'>

   <div class="form-group">
      <label class="control-label col-sm-2" for="name">Naam</label>
      <div class="col-sm-10">
         
         <cms:hide><cms:input type='text' name='name' /></cms:hide>
         <input type='text' name='name' id='name' required='1' placeholder='Uw naam' class='form-control' value="<cms:gpc method='post' var='name'/>">
         <cms:if k_error_email><div class="alert alert-danger">Graag uw volledige naam invulllen.</div></cms:if>
      </div>
   </div>
   <div class="form-group">
      <label class="control-label col-sm-2" for="email">E-mailadres</label>
      <div class="col-sm-10">
         
         <cms:hide><cms:input type='text' name='email' validator='email' /></cms:hide>
         <input type="email" name="email" placeholder="Uw e-mailadres" required="1" class="form-control" value="<cms:gpc method='post' var='email'/>">
         <cms:if k_error_email><div class="alert alert-danger">Graag een geldig e-mail adres invulllen.</div></cms:if>
         
      </div>
   </div>
   <div class="form-group">
      <label class="control-label col-sm-2" for="my-captcha">Beveiliging</label>
      <div class="col-sm-10">
         <p class="gr2">Neem de karakters uit de afbeelding over en vul ze in het veld hieronder in:</span></p><cms:input type='captcha' name='my-captcha' label='Beveiliging' class='form-control' style='display:inline' />
      </div>
   </div>
   <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Versturen</button>
      </div>
   </div>

   <cms:if k_success>
      
      <div class="alert alert-success"><strong>Bedankt!</strong> Uw bericht is succesvol verstuurd. Wij nemen zo spoedig mogelijk contact met u op.</div>
      <cms:send_mail from=k_email_from to=k_email_to subject='Contactaanvraag via contactformulier website'>
         Het volgende bericht is door een bezoeker van de website ingevuld:
         <cms:show k_success />
      </cms:send_mail>
            
   </cms:if>

</cms:form>

[KK]

Thanks.
I think making the following change should turn off HTML5 validation -

<cms:form action='contact.php' method='post' id='' class='form-horizontal' role='form' novalidate="novalidate">

Hope it helps.

Thanks for the reply. It does the trick, however i'm running in other validation issues concerning html5 specific input fields. As you saw in the code I wanted to use html5 specific input types like 'email' and 'telephone', but I'm unable to get it to work properly.

I've switched back to text fields and they seem to validate correctly.

I do have another question: is it possible to add a styling to input fields that don't validate (ie: k_error_* is present)? In this way I can make the borders of these input fields red (as my client requests).

I tried this:

Code: Select all

<cms:input type='text' required='1' name='name' placeholder='Uw naam' class='form-control' style='<cms:if k_error_name>border:red</cms:if>' value="<cms:gpc method='post' var='name'/>" />

[KK]

I see that you are explicitly setting 'value' using posted values

value="<cms:gpc method='post' var='name'/>"

It is redundant as Couch does the same for you.

Replying to your query, please use double-quotes for setting parameters that have enclosed Couch tags. The following version should work -

Code: Select all

<cms:input 
    type='text' 
    required='1' 
    name='name' 
    placeholder='Uw naam' 
    class='form-control' 
    style="<cms:if k_error_name>border:1px solid red</cms:if>" 
/>

Hope it helps.