CGBetterForms validation

[rooon]

Hi all,

On a website I'm using CGBetterForms with many regex validation rules. After submitting the form, I'd like to use the validation error from each field in the template.
For now, I have this code but I think there are better ways to do this.

Does someone have any tips or code snippets to simplify this.

Code: Select all

{* $invalid : string containing all field names which are not valid *}
{$invalid = ''}
{$tmp = ''}
{cgbf_form_errors assign='errors'}
{if !empty($errors)}
  {foreach $errors as $err}
    {if $err|strpos:'captcha' !== false}
      {$invalid = $invalid|cat:' captcha'}
    {else}
      {$tmp = $err|substr:17|replace:'field is invalid':''}
      {$invalid = $invalid|cat:$tmp}
    {/if}
  {/foreach}
  {$invalid|trim}
{/if}

{if $invalid|strpos:'captcha' !== false}
  do something...
{/if}

{if $invalid|strpos:'company' !== false}
  do something...
{/if}

Thanx in advance, Ronald

[rooon]

Anybody a fool-proof solution please?

The test form I use with the 'error' code of the template in post #1

Code: Select all

<form novalidate>

  <!-- email -->
  <label for="email">Email *</label>
  <input name="email" id="email" type="email" formnovalidate value="">

  <!-- captcha & submit -->
  <label>Captcha *</label>
  <div data-cgbf-captcha></div>
  <button type="submit">Send</button>

</form>

[rooon]

A second question about this form. After submitting, and if some inputs are not filled in correct, the form returns with empty inputs. Only the textarea, checkbox and radio input return the filled in values.

What do I wrong here?

[rooon]

The form is complete. Please let me know if someone know a better way for the error handling in this template.

In all fields I use validation with regular expression, for example

Message (textarea)
Minimal 6 characters, start counting from the first alfanumeric character
/\W*\w([\w|\W]){5,}/

Email (input type="email")
/^([a-zA-Z0-9_\+\-\.]+)@([a-zA-Z0-9\-\.]{2,50})\.(com|eu|info|int|net|org|be|de|lu|nl|uk)$/
Min. 1 alfanumeric or _ + - . character before the @ , then the domain 2-50 alfanumeric or - . characters. Accepts only TLDs from a list.

CGBetterForms template

Code: Select all

{$fieldErr = ''}
{$otherErr = ''}
{$tempStr = ''}
{cgbf_form_errors assign='errors'}
{if !empty($errors)}
  {foreach $errors as $err}
    {if $otherErr == ''}
      {if $err|strpos:'captcha' !== false}
        {$fieldErr = $fieldErr|cat:' captcha '}
      {elseif $err|strpos:'field is invalid' !== false}
        {$tempStr = $err|substr:17|replace:'field is invalid':''}
        {$fieldErr = $fieldErr|cat:$tempStr}
      {else}
        {$otherErr = $err}
      {/if}
    {/if}
  {/foreach}
{/if}

{if $otherErr != ''}
  <div class="alert alert-info">{$otherErr}</div>
{elseif $fieldErr != ''}
  <div class="alert alert-info">One or more fields are not valid</div>
{/if}

<form id="form1" novalidate>

  {* example email *}
  <div class="form-group row bf-email{if $fieldErr|strpos:'email' !== false} bf-error{/if}">
    <label for="email_0" class="col-sm-2 col-form-label">Email<span> *</span></label>
    <div class="col-sm-10">
      <input class="form-control form-control-sm" name="email" id="email_0" type="email" placeholder="name@provider.com">
    </div>
  </div>

  {* captcha and submit*}
  <div class="form-group row bf-submit{if $fieldErr|strpos:'captcha' !== false} bf-error{/if}">
    <label for="cgbf_input_captcha" class="col-sm-2 col-form-label">Check<span> *</span></label>
    <div class="col-sm-10">
      <div data-cgbf-captcha></div>
      <button class="btn btn-info" type="submit">Submit</button>
    </div>
  </div>

</form>

[rooon]

Remove alt and title text from the captcha image.
Add bootstrap 4 classes to the captcha input.

Code: Select all

{capture assign=cform}{CGBetterForms form="AppContactFormCgbf"}{/capture}{strip}
{* Remove alt="blah" title="blah" from captcha *}
{$cform = $cform|regex_replace:"/This is a captcha[\w\W]+No Bots allowed/":""}
{* add bootstrap classes and placeholder *}
{$cform = $cform|regex_replace:'/class="cgbf_input_captcha"/':'class="cgbf_input_captcha form-control form-control-sm" placeholder="Typ de 6 tekens"'}
{* show contactform *}
{/strip}{$cform}