Forum

Thread tagged as: Problem, Error, Forms

Form validation ignored when adding a perch:error tag to output class

Hey,

I seem to have ran into an issue when adding a <perch:error> tag to output a class on an element. When added, form validation seems to be bypassed and the form is processed successfully even when missing required fields are present. When removed the form validates as it should and outputs the error messages.

I have pinned the difference down to class="input input--required<perch:error for="name" type="required"> input--error</perch:error>"

Not working:

<perch:form method="post" id="contact" app="perch_forms" prefix="none" class="contact-form" autocomplete="off">
  <perch:error for="all" type="general">
      <div class="response">
        <div class="alert alert--error">
            <p>Sorry, something went wrong and the form was not sent. Please see the messages below.</p>
            <button class="alert-button" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>
        </div>
      </div>
  </perch:error>

  <div class="field">
    <perch:label for="name" class="form-label">Name</perch:label>
    <perch:input id="name" type="text" label="Name" antispam="name" mailer="name" class="input input--required<perch:error for="name" type="required"> input--error</perch:error>" placeholder=" " required="true" />
    <perch:error for="name" type="required"><p class="form-help form-help--error">Name is required</p></perch:error>
  </div>

  <div class="form-action">
    <perch:input type="cms" />
    <button id="submit" type="submit" name="submit" class="btn btn-large btn-block">Send Message</button>
  </div>

  <perch:success>
  <div class="response">
    <div class="alert alert--success">
        <p>Thank You! - Your enquiry has been sent</p>
        <button class="alert-button" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>
    </div>
  </div>
  </perch:success>
</perch:form>

Working:

<perch:form method="post" id="contact" app="perch_forms" prefix="none" class="contact-form" autocomplete="off">
  <perch:error for="all" type="general">
      <div class="response">
        <div class="alert alert--error">
            <p>Sorry, something went wrong and the form was not sent. Please see the messages below.</p>
            <button class="alert-button" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>
        </div>
      </div>
  </perch:error>

  <div class="field">
    <perch:label for="name" class="form-label">Name</perch:label>
    <perch:input id="name" type="text" label="Name" antispam="name" mailer="name" class="input input--required" placeholder=" " required="true" />
    <perch:error for="name" type="required"><p class="form-help form-help--error">Name is required</p></perch:error>
  </div>

  <div class="form-action">
    <perch:input type="cms" />
    <button id="submit" type="submit" name="submit" class="btn btn-large btn-block">Send Message</button>
  </div>

  <perch:success>
  <div class="response">
    <div class="alert alert--success">
        <p>Thank You! - Your enquiry has been sent</p>
        <button class="alert-button" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>
    </div>
  </div>
  </perch:success>
</perch:form>

Perch Runway: 3.0.12, PHP: 7.0.6, MySQL: 5.5.57, with PDO Server OS: Linux, cgi-fcgi Installed apps: content (3.0.12), assets (3.0.12), categories (3.0.12), perch_forms (1.10), chirp_seo (1.2.1), redfinch_logger (1.0.1), boldr (1.0), perch_twitter (4.0) App runtimes: <?php $apps_list = [ 'perch_forms', 'perch_twitter', 'chirp_seo', 'boldr' ]; PERCH_LOGINPATH: /cms PERCH_PATH: /nfs/c12/h06/mnt/216239/domains/chestnuts.madebyboldr.co.uk/html/cms PERCH_CORE: /nfs/c12/h06/mnt/216239/domains/chestnuts.madebyboldr.co.uk/html/cms/core PERCH_RESFILEPATH: /nfs/c12/h06/mnt/216239/domains/chestnuts.madebyboldr.co.uk/html/cms/assets Image manipulation: GD PHP limits: Max upload 99M, Max POST 99M, Memory: 99M, Total max file upload: 99M F1: 3b606135b33e6a102526838f4152a807 Resource folder writeable: Yes SCRIPT_NAME: /cms/core/settings/diagnostics/index.php REQUEST_URI: /cms/core/settings/diagnostics/ DOCUMENT_ROOT: /home/216239/domains/chestnuts.madebyboldr.co.uk/html HTTP_HOST: chestnuts.madebyboldr.co.uk

Marc Sanders

Marc Sanders 0 points

  • 3 years ago
Simon Clay

Simon Clay 127 points

I would imagine it is running into issues when there is a Perch tag inside a Perch tag.

Does it help at all if you move the required="true" to before the class is declared?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Simon is correct, you can't nest tags like that.

Hi Simon, funny enough - that does seem to make a difference. The form now validates as expected.

Thank you for the suggestion.

<div class="field">
    <perch:label for="name" class="form-label">Name</perch:label>
    <perch:input id="name" type="text" label="Name" antispam="name" mailer="name" required="true" class="input input--required<perch:error for="name" type="required"> input--error</perch:error>" placeholder=" " />
    <perch:error for="name" type="required"><p class="form-help form-help--error">Name is required</p></perch:error>
  </div>

I will consider adding an error class to the field instead of the input itself.