Forum

Thread tagged as: Problem, Forms

Required attribute not showing on form inputs

Hi,

I have a Perch form within an editable content template so that editors can manage the form labels and error messages. Everything is working as I'd expect except that the required attribute is not being set on the inputs even though I have included required="true".

Here is the template code:

<perch:form id="contact-form" method="post" app="perch_forms" prefix="none" action="#contact-form">
<perch:content id="body_text" type="textarea" size="m" label="Body content" html="true" editor="markitup" textile="true" help="Body content pasted here" />
<perch:error for="all" type="general">
<p class="alert alert--warning"><perch:content id="form_general_error_text" type="text" size="xl" label="Error message" html="true" textile="false" help="Content displayed to user when validation errors are present" required="true" divider-before="General error message" /></p>
</perch:error>
    <div class="form-item">
        <perch:label for="name" class="required"><perch:content id="form_label_name" required="true" type="text" size="l" label="Name label" html="false" textile="false" help="e.g. Your name" divider-before="Form field labels and validation messages" /></perch:label>
        <perch:input type="text" id="name" required="true" label="Name" />
        <perch:error for="name" type="required"><p class="alert-form alert--warning"><perch:content id="form_error_name" required="true" type="text" size="l" label="Name validation" html="false" textile="false" help="e.g. Please provide your name" /></p></perch:error>
    </div>
    <div class="form-item">
        <perch:label for="email" class="required"><perch:content id="form_label_email" required="true" type="text" size="l" label="Email label" html="false" textile="false" help="e.g. Your email" /></perch:label>
        <perch:input type="email" id="email" required="true" label="Email" />
        <perch:error for="email" type="required"><p class="alert-form alert--warning"><perch:content id="form_error_email" required="true" type="text" size="l" label="Email validation" html="false" textile="false" help="e.g. Please provide your email" /></p></perch:error>
        <perch:error for="email" type="format"><p class="alert-form alert--warning"><perch:content id="form_error_email_format" required="true" type="text" size="l" label="Email validation (format)" html="false" textile="false" help="e.g. Please check your email address" /></p></perch:error>
    </div>
    <div class="form-item">
        <perch:label for="tel" class="required"><perch:content id="form_label_telephone" required="true" type="text" size="l" label="Phone label" html="false" textile="false" help="e.g. A contact number" /></perch:label>
        <perch:input type="text" id="tel" required="true" label="Tel" />
        <perch:error for="tel" type="required"><p class="alert-form alert--warning"><perch:content id="form_error_tel" required="true" type="text" size="l" label="Tel validation" html="false" textile="false" help="e.g. Please provide a contact number" /></p></perch:error>
    </div>
    <div class="form-item">
        <perch:label for="message"><perch:content id="form_label_message" required="true" type="text" size="l" label="Email label" html="false" textile="false" help="e.g. Your message" /></perch:label>
        <perch:input type="textarea" id="message" label="Message" rows="6" />
    </div>
    <div class="form-item">
        <perch:input type="submit" id="submit" class="c-btn c-btn--contact" value="<perch:content id="form_button_value" required="true" type="text" size="l" html="false" textile="false" help="e.g. Send info request" divider-before="Form button text" />" />
    </div>
    <perch:success>
    <div class="alert alert--success">
        <perch:content id="form_success_text" type="textarea" size="s" label="Success message" html="true" editor="markitup" textile="true" help="Content displayed to user on a successful form submission" required="true" divider-before="Success message" />
    </div>
    </perch:success>
</perch:form>

Any help or ideas would be much appreciated!
Simon Kelly

Simon Kelly 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

What do you mean by the required attribute is not being set? What happens? Can you see it in the source?
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi Rachel,

The required attribute isn't set on the form input in the source, and so the form just submits without any browser validation.
Simon Kelly

Simon Kelly 0 points

4 years ago

I can also see that the input I have for the email field is set to type="email" in my template but is output in the source as type="text"
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

Are you viewing source as opposed to using DevTools?
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi, Both source and dev tools show the same thing: no required attribute set on the input.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Can we see your diagnostics?
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi again. I've had a look in the error logs and can see the following occurs when I submit the form.

PHP Fatal error: Uncaught Error: Call to a member function label() on null in /Applications/MAMP/htdocs/xxxxxxxxxx/httpdocs/perch/addons/apps/perch_forms/runtime.php:25

I've also tried throwing the same template into another Perch project and it seems to work as expected there.

I can try a fresh install and see if that helps, but if you have any ideas about the error message, that would be useful.

Thanks,

Simon
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Diagnostics would be useful.
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi Drew, yes, sure, I hadn't seen your reply when I sent my last comment. I'll post the Diagnostics shortly. Thanks.
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi, here's the extended diagnostics report:

Perch: 2.8.32
Production mode: (PERCH_DEVELOPMENT)
Installed apps: content (2.8.32), assets (2.8.32), categories (2.8.32), perch_forms (1.8.3)
DB driver: PDO
DB tables: perch2_categories (0), perch2_category_counts (0), perch2_category_sets (0), perch2_content_index (443), perch2_content_items (78), perch2_content_regions (13), perch2_forms (2), perch2_forms_responses (1), perch2_navigation (0), perch2_navigation_pages (0), perch2_page_templates (1), perch2_pages (4), perch2_resource_log (293), perch2_resource_tags (5), perch2_resources (43), perch2_resources_to_tags (10), perch2_settings (10), perch2_user_passwords (1), perch2_user_privileges (29), perch2_user_role_privileges (16), perch2_user_roles (2), perch2_users (1)
Users: 1
App runtimes:
<?php
    $apps_list = array(
        'content', 
        'categories',
        'perch_forms',
    );
Editor plug-ins: markitup
H1: 0655587c18fb525509b26af295722ad3
L1: b9d653c57b97cce234d1d9b7ebc7e82f
F1: 2edba60ed1f613d6dd804feb202456a2
headerColour: #ffffff
content_singlePageEdit: 1
helpURL:
siteURL: /
hideBranding: 0
content_collapseList: 1
lang: en-gb
update_2.8.32: done
latest_version: 2.8.15
on_sale_version: 2.8.32
PERCH_DEVELOPMENT: 10
PERCH_STAGING: 50
PERCH_PRODUCTION: 100
PERCH_DB_USERNAME: perch
PERCH_DB_SERVER: localhost
PERCH_DB_DATABASE: perch_coworking
PERCH_PRODUCTION_MODE: PERCH_DEVELOPMENT
PERCH_DB_PREFIX: perch2_
PERCH_TZ: UTC
PERCH_EMAIL_FROM: xxxxxxxxxxxxxxxxxx
PERCH_EMAIL_FROM_NAME: xxxxxxxxxxxxxxxxxx
PERCH_LOGINPATH: /perch
PERCH_PATH: D:\sites\xxxxxxxxxxxxxxxxxx\httpdocs\perch
PERCH_CORE: D:\sites\xxxxxxxxxxxxxxxxxx\httpdocs\perch\core
PERCH_RESFILEPATH: D:\sites\xxxxxxxxxxxxxxxxxx\httpdocs\perch\resources
PERCH_RESPATH: /perch/resources
PERCH_RUNWAY:
PERCH_ERROR_MODE: DIE
PERCH_DATE_LONG: %d %B %Y
PERCH_DATE_SHORT: %d %b %Y
PERCH_TIME_SHORT: %H:%M
PERCH_TIME_LONG: %H:%M:%S
PERCH_RUNWAY_ROUTED:
PERCH_STRONG_PASSWORDS:
PERCH_DEBUG:
PERCH_PREVIEW_ARG: preview
PERCH_TEMPLATE_PATH: D:\sites\xxxxxxxxxxxxxxxxxx\httpdocs\perch\templates
PERCH_DEFAULT_DOC: index.php
PERCH_DEFAULT_EXT: .php
PERCH_HTML5:
PERCH_RWD:
PERCH_HTML_ENTITIES:
PERCH_SSL:
PERCH_STRIPSLASHES:
PERCH_PROGRESSIVE_FLUSH: 1
PERCH_PARANOID:
PERCH_FORCE_SECURE_COOKIES:
PERCH_PASSWORD_MIN_LENGTH: 6
PERCH_MAX_FAILED_LOGINS: 10
PERCH_AUTH_LOCKOUT_DURATION: 1 HOUR
PERCH_VERIFY_UPLOADS:
PERCH_AUTH_PLUGIN:
PERCH_DB_CHARSET: utf8
PERCH_DB_PORT:
PERCH_DB_SOCKET:
PERCH_SESSION_TIMEOUT_MINS: 20
HOSTING SETTINGS

PHP: 5.6.21
Zend: 2.6.0
OS: WINNT
SAPI: apache2handler
Safe mode: not detected
MySQL client: mysqlnd 5.0.11-dev - 20120503 - $Id: 76b08b24596e12d4553bd41fc93cccd5bac2fe7a $
MySQL server: 5.6.30
Free disk space: 966.46 MB
Extensions: Core, bcmath, calendar, ctype, date, ereg, filter, ftp, hash, iconv, json, mcrypt, SPL, odbc, pcre, Reflection, session, standard, mysqlnd, tokenizer, zip, zlib, libxml, dom, PDO, bz2, SimpleXML, wddx, xml, xmlreader, xmlwriter, apache2handler, openssl, curl, fileinfo, gd, gettext, gmp, imap, mbstring, exif, mysql, mysqli, Phar, pdo_mysql, pdo_sqlite, soap, sockets, sqlite3, tidy, xmlrpc, xsl, com_dotnet, mhash, ionCube Loader
GD: Yes
ImageMagick: No
PHP max upload size: 32M
PHP max form post size: 32M
PHP memory limit: 128M
Total max uploadable file size: 32M
Resource folder writeable: Yes
Session timeout: 24 minutes
Native JSON: Yes
Filter functions: Yes
Transliteration functions: No
TMP: C:/Program Files (x86)/Ampps/tmp
HTTP_HOST: dev.coworking
HTTP_CONNECTION: keep-alive
HTTP_PRAGMA: no-cache
HTTP_CACHE_CONTROL: no-cache
HTTP_UPGRADE_INSECURE_REQUESTS: 1
HTTP_USER_AGENT: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
HTTP_REFERER: https://dev.coworking/perch/core/settings/diagnostics/
HTTP_ACCEPT_ENCODING: gzip, deflate, sdch
HTTP_ACCEPT_LANGUAGE: en-GB,en-US;q=0.8,en;q=0.6,es;q=0.4
HTTP_COOKIE: _ga=GA1.2.990152359.1481879176; cmsa=1; PHPSESSID=8bacjepm8mjbfhrutt5efj21u7
PATH: C:\Program Files\ImageMagick-6.8.9-Q16;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Program Files (x86)\PC Connectivity Solution\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Common Files\Adobe\AGL;C:\Program Files\nodejs\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x64;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files (x86)\Skype\Phone\;C:\HashiCorp\Vagrant\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Users\SKelly\AppData\Roaming\npm;C:\Ruby193\bin
SystemRoot: C:\Windows
COMSPEC: C:\Windows\system32\cmd.exe
PATHEXT: .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC
WINDIR: C:\Windows
SERVER_SOFTWARE: Apache/2.4.20 (Win32) OpenSSL/1.0.2g PHP/5.6.21 mod_wsgi/4.4.21 Python/3.5.1
SERVER_NAME: dev.coworking
SERVER_ADDR: 127.0.0.1
SERVER_PORT: 80
REMOTE_ADDR: 127.0.0.1
DOCUMENT_ROOT: D:/sites/xxxxxxxxxxxxxxxxxx/httpdocs
REQUEST_SCHEME: http
CONTEXT_DOCUMENT_ROOT: D:/sites/xxxxxxxxxxxxxxxxxx/httpdocs
SERVER_ADMIN: admin@localhost
SCRIPT_FILENAME: D:/sites/xxxxxxxxxxxxxxxxxx/httpdocs/perch/core/settings/diagnostics/index.php
REMOTE_PORT: 50177
GATEWAY_INTERFACE: CGI/1.1
SERVER_PROTOCOL: HTTP/1.1
REQUEST_METHOD: GET
QUERY_STRING: extended
REQUEST_URI: /perch/core/settings/diagnostics/?extended
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
PHP_SELF: /perch/core/settings/diagnostics/index.php
REQUEST_TIME_FLOAT: 1481879976.753
REQUEST_TIME: 1481879976

Thanks!
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

You are using Safari which doesn't support the HTML5 attributes. Is it these you are not seeing? Or are you also not seeing error messages set through Perch.
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi Rachel.

Yes, it's the HTML5 required attribute that I'm not seeing, plus the input types I ask for in the template (e.g. type="email") display as type="text". So because there is no browser validation, the form is processed immediately and I see the error messages I've set in Perch.

I'm using Chrome actually, but I also get the same behaviour in FF and IE. As I said earlier, I've tried throwing the same template at another Perch project and it works as expected, and doesn't produce the php error that I mentioned earlier. I'll try a fresh install of Perch and see if that does anything.
Simon Kelly

Simon Kelly 0 points

4 years ago

Hi there,

I dropped the database and ran through set up again and everything is working exactly as it should. No idea what was happening to cause it not to work but I'm pleased it's all ok.

Thanks very much for your time.