HTML validation not working in form

[thom-moresoda]

"craftcms/cms": "4.5.6.1",
"solspace/craft-freeform": "4.1.9"

I have a site with multiple freeform forms set up - on some of the forms the html email validation works, but on others it doesn't. The forms have identical settings in the control panel & are rendered in the same way in the templates

Hoping someone can point me in the right direction!

[kjmartens]

Hi @thom-moresoda,

Can you share with us what your template(s) look like? It might be a matter of one including a parameter or attribute and the other is not. This is cleaned up nicely in Freeform 5, but in Freeform 4, there's a handful of ways this might be done: 🙂

useRequiredAttribute: true

formAttributes: {
    "novalidate": true,
    "data-form-id": "test"
}

inputAttributes: {
   "readonly": true,
   "data-field-id": "test"
}

Additionally, inside the form builder for the form or each field using the "Attributes" table.

[thom-moresoda]

Hi @kjmartens thanks for the reply 👍

I've stuck some of the templating below from each form so you can see how the form tags & fields are being rendered on the page

Form One (html validation not appearing)

{% set form = craft.freeform.form('registration') %}

{{ form.renderTag({
	id: "registration",
	class: "form",
	returnUrl: "/thank-you"
}) }}

	{% if form.hasErrors %}
		<p class="paragraph form__error">{{ "There was an error submitting this form"|t }}</p>
	{% endif %}

	{% set title = form.get("nameTitle") %}
	{% set forename = form.get("forename") %}
	{% set surname = form.get("surname") %}
	{% set suffix = form.get("suffix") %}
	{% set dateOfBirth = form.get("dateOfBirth") %}
	{% set email = form.get("email") %}
	{% set mobilePhone = form.get("cellPhone") %}
	{% set homePhone = form.get("homePhone") %}
	{% set shortAddress = form.get("shortAddress") %}
	{% set postcode = form.get("zipCode") %}

	{% set employer = form.get("companyName") %}
	{% set department = form.get("department") %}
	{% set telephoneNumber = form.get("workPhone") %}
	{% set laboratoryAddress = form.get("laboratoryAddress") %}
	{% set workPostcode = form.get("workPostcode") %}
	
	{% set postOne = form.get("postOne") %}
	{% set postTwo = form.get("postTwo") %}
	{% set postThree = form.get("postThree") %}
	{% set gradeOne = form.get("gradeOne") %}
	{% set gradeTwo = form.get("gradeTwo") %}
	{% set gradeThree = form.get("gradeThree") %}
	{% set specialityOne = form.get("specialityOne") %}
	{% set specialityTwo = form.get("specialityTwo") %}
	{% set specialityThree = form.get("specialityThree") %}
	{% set employerOne = form.get("employerOne") %}
	{% set employerTwo = form.get("employerTwo") %}
	{% set employerThree = form.get("employerThree") %}
	{% set startDateOne = form.get("startDateOne") %}
	{% set startDateTwo = form.get("startDateTwo") %}
	{% set startDateThree = form.get("startDateThree") %}

	{% set preferredContactAddress = form.get("preferredContactAddress") %}
	{% set subscriptionType = form.get("subscriptionType") %}

	{% set correct = form.get("correct") %}
	{% set dataConsentPublications = form.get("dataConsentPublications") %}
	{% set contactConsent = form.get("contactConsent") %}

	<div class="form__container container">
		
		<h3 class="form__sub-heading">Personal Details</h3>

		<div class="form__row form__row--flex">
			<div>
				{{ title.renderLabel() }}
				{{ title.renderInput() }}
				{{ title.renderErrors() }}
			</div>
			<div>
				{{ forename.renderLabel() }}
				{{ forename.renderInput() }}
				{{ forename.renderErrors() }}
			</div>

Form Two (html validation appearing)

{% set form = craft.freeform.form('contact') %}

{{ form.renderTag({
	id: "contact",
	class: "form",
	returnUrl: "/thank-you"
}) }}

	{% if form.hasErrors %}
		<p class="paragraph form__error">{{ "There was an error submitting this form"|t }}</p>
	{% endif %}

	{% set fullName = form.get("fullName") %}
	{% set email = form.get("email") %}
	{% set cellPhone = form.get("cellPhone") %}
	{% set message = form.get("message") %}

	<div class="form__container container">
		<div class="form__row form__row--flex">
			<div>
				{{ fullName.renderLabel() }}
				{{ fullName.renderInput() }}
				{{ fullName.renderErrors() }}
			</div>
			<div>
				{{ email.renderLabel() }}
				{{ email.renderInput() }}
				{{ email.renderErrors() }}
			</div>

It doesn't look like any attributes have been added via the editor for either form & the html form tags look identical other than an extra gtm tag on the first one

[kjmartens]

Thanks for the additional information. What does the parsed/rendered code look like for each inside your page? 🙂

There should be attributes in your template code like:

• <input type="email">
• <input required>

And there should NOT be attributes like:

• <form novalidate>

[thom-moresoda]

Heres the rendered code for each:

Form One (html validation not appearing)

<form
    method="post"
    id="registration"
    class="form"
    data-freeform
    data-id="97a1de-form-EKdJKzvNX-2qxAknPzp-I9pyGcDN3U2XEOGW5hITmfIXr3I6EPaZljIecDqO"
    data-handle="registration"
    data-ajax
    data-disable-submit
    data-auto-scroll
    data-success-message="Form has been submitted successfully!"
    data-error-message="Sorry, there was an error submitting the form. Please try again."
    data-honeypot
    data-honeypot-name="freeform_form_handle_9c554b"
    data-honeypot-value="b8e4c19d6"
>
    <div class="freeform_form_handle_9c554b" style="position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important;" aria-hidden="true" tabindex="-1">
        <label aria-hidden="true" tabindex="-1" for="freeform_form_handle_9c554b">Leave this field blank</label>
        <input type="text" value="f109f3" name="freeform_form_handle_9c554b" id="freeform_form_handle_9c554b" aria-hidden="true" autocomplete="off" tabindex="-1" />
    </div>
    <input
        type="hidden"
        name="freeform_payload"
        value="2mC7MqBR8qXQ1eifjfGgIzdhOWRjYWY1MTIxYjUyNzQzYjZhMmJkY2RiODBiMzE3MTJkZWM4NzNjMmRmNGQ0NDcyYjg0ODVkZTk2MjkzYTjRaSSoZ1CR7aKJLCkEtVcrpCv8UmAjOx8+0VDWWmAc8Z/WLkxdNbaa7H6qzmAL4rIVAfbhzbN5ripdvhxDMHYvi0c2HTNVBtjw4ERjuYvZ69cCp4Pfh0HYc+Z/Dxvc6Y8cqKs7PWt2bmWPeVHGLakFYylHxUExe592r3RrNpk5n5JXxlpF7UQo1PuNKlfhoI5+UoskLhUjWUAwFxB+zAY6+p9MsBURuusE0EztH0D6GhqLRgp04yrB8jqv2iRKxK4CeUFMTkpd23h2OLs4XtrNNQn0SiekT7mMAlp3g2Z9VoO2QrNkyWDjWrUwW6evYWbwmhTayGVFfCDEf3hfpM4oex0hJ8xQw/KrGO3vYjSe/wHItAeUDAMzx3Otqemoakx6FVzBFR6im15LGnyK5Js+NKbJpNhxyWpyZpDKfD9DFrPe5Sx0RuGMj8H91f4FmO0JSQoJzvRJSCp283/tzRkTegX8pbrTQGM+XjlIF96do3XqTTx0PhTg8m7dZcYP3gRyjhe5BtkSTgkzFMAohxIsDxb3zLHh3UiBfimHtzRYggO2xvxWkb8EjddPcCggSqFImPpFLq0i2WiG6YPmgaednAdLRgcIN4CSrcRj+3J46A=="
    />
    <input type="hidden" name="formHash" value="EKdJKzvNX-2qxAknPzp-I9pyGcDN3U2XEOGW5hITmfIXr3I6EPaZljIecDqO" />
    <input type="hidden" name="action" value="freeform/submit" />
    <div id="97a1de-form-EKdJKzvNX-2qxAknPzp-I9pyGcDN3U2XEOGW5hITmfIXr3I6EPaZljIecDqO" data-scroll-anchor style="display: none;"></div>
    <input type="hidden" name="freeform-action" value="submit" />
    <input type="hidden" name="CRAFT_CSRF_TOKEN" value="oK5_n1LyftSMQT-qHF6QlB8rXdjWxl4zLfINzEH059d3YjqNwLzNsv-dB8x_lT-L2CtMy18n5txTQwWx7qgJeUuYb_54rqqvBAB_-aLpgPw=" />
    <input type="hidden" name="formReturnUrl" value="7df29236e0f9b9cc1d2e90e5919ae188cc95d15cf990f469cf05bc67d776174f/thank-you" />

    <div class="form__container container">
        <h3 class="form__sub-heading">Personal Details</h3>

        <div class="form__row form__row--flex">
            <div>
                <label for="form-input-nameTitle" class>Title</label>

                <input class=" " name="nameTitle" type="text" id="form-input-nameTitle" placeholder="e.g. Ms" data-required />
            </div>
            <div>
                <label for="form-input-forename" class>Forename(s)</label>

                <input class=" " name="forename" type="text" id="form-input-forename" data-required />
            </div>
            <div>
                <label for="form-input-surname" class>Surname</label>

                <input class=" " name="surname" type="text" id="form-input-surname" data-required />
            </div>
            <div>
                <label for="form-input-suffix" class>Suffix</label>

                <input class=" " name="suffix" type="text" id="form-input-suffix" placeholder="e.g. PhD" />
            </div>
            <div>
                <label for="form-input-dateOfBirth" class>Date of Birth</label>

                <input class=" " name="dateOfBirth" type="text" id="form-input-dateOfBirth" placeholder="DD/MM/YYYY" data-required />
            </div>
        </div>

        <h3 class="form__sub-heading">Contact Details</h3>

        <div class="form__row form__row--flex">
            <div>
                <label for="form-input-email" class>Email</label>

                <input class name="email" type="email" id="form-input-email" placeholder="[email protected]" data-required />
            </div>
            <div>
                <label for="form-input-cellPhone" class>Mobile No.</label>

                <input class=" " name="cellPhone" type="text" id="form-input-cellPhone" data-required />
            </div>
            <div>
                <label for="form-input-homePhone" class>Telephone</label>

                <input class=" " name="homePhone" type="text" id="form-input-homePhone" />
            </div>
            <div>
                <label for="form-input-shortAddress" class>Residential Address</label>

                <input class=" " name="shortAddress" type="text" id="form-input-shortAddress" data-required />
            </div>
            <div>
                <label for="form-input-zipCode" class>Postcode</label>

                <input class=" " name="zipCode" type="text" id="form-input-zipCode" data-required />
            </div>
        </div>
    </div>
</form>

[thom-moresoda]

Form Two (html validation appearing)

<form
    method="post"
    id="contact"
    class="form"
    data-freeform
    data-id="28cc12-form-YW8v3RGxe-VYd0Nl82x-69OMKRcM3Y35afg7MRL9hWsmUFVPVzcWaBDAf7R5"
    data-handle="contact"
    data-ajax
    data-disable-submit
    data-auto-scroll
    data-success-message="Form has been submitted successfully!"
    data-error-message="Sorry, there was an error submitting the form. Please try again."
    data-honeypot
    data-honeypot-name="freeform_form_handle_a539c0"
    data-honeypot-value="2388f72c5"
>
    <div class="freeform_form_handle_a539c0" style="position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important;" aria-hidden="true" tabindex="-1">
        <label aria-hidden="true" tabindex="-1" for="freeform_form_handle_a539c0">Leave this field blank</label>
        <input type="text" value="5a1926" name="freeform_form_handle_a539c0" id="freeform_form_handle_a539c0" aria-hidden="true" autocomplete="off" tabindex="-1" />
    </div>
    <input
        type="hidden"
        name="freeform_payload"
        value="HIA7C6i+6qotI/kJx4TpjzNmYmY2YzU3YTdmOTE2ODA2NGM5ZTY1MTQyYWM1ZjdiYWJlNjdmZTk4YjQ2ZmU4OTlkNTA4MDc0ODZiZmNkN2E4ZpbKHiAj0/OMeb464c61WLy5IZztYQm1oDYyPwF2EFGRgq/zHtkyrDbyOOQaZh5M1gjwUQUTSVES1WrY4VDX6QdjBR9rYKGd8HPZhC92x6iuey8exj9FkIeTr96KmuZj+yhRdNWsJSlIPDbQKp1zZYEzO71taVwh7P3jUbv4TfhCNmxjcO0vPAlOTF3i1/ehoLrEHq61KYSUnWotd8Qc+ctxyVvV7zmb4Q8I0KdPrS5pOwiKfW+5coXM2fWK4KBiONp6ioLdy4Q86uiy6sTMP5hyg1fk9ksZG9iOm5jwiyMe+h3V9g4UwBqeyzCLRt5L7aDbFLKr14mYBT/QlMcoi42EkG5Y/yXNSD6S6KDRKoEm5a/iCbsiL5iGne/Og96n8FwUmb6QeE6oqqHeTTkaQGbn8Y4xj4anq4k9eQh7wZl7xfAKZDC3xHSC+7g8uO7yQHxJJemtMlLKdgcc7wWBZOd2pEPmmjs4NnXJEoGl3y4RcCszgmxdGDNGgUBgri5F2LvzMPDCb6xl1kS3lfCNma2HsZ/YSZ/XBSZ5iTtknXoPPRClfqnmX4JC6QlZrY9Yl6Pkw0QHHsfHblpChH0W"
    />
    <input type="hidden" name="formHash" value="YW8v3RGxe-VYd0Nl82x-69OMKRcM3Y35afg7MRL9hWsmUFVPVzcWaBDAf7R5" />
    <input type="hidden" name="action" value="freeform/submit" />
    <div id="28cc12-form-YW8v3RGxe-VYd0Nl82x-69OMKRcM3Y35afg7MRL9hWsmUFVPVzcWaBDAf7R5" data-scroll-anchor style="display: none;"></div>
    <input type="hidden" name="freeform-action" value="submit" />
    <input type="hidden" name="CRAFT_CSRF_TOKEN" value="AKWlBdCdxaRX3Fws7Tt_m4pkQ15l6FlRFAj18ohCx-OBQugfrAtf0F-W3Vb9-oT7A7YvTa5CCdPGDBs3XYYOG3Jil8CxGIqb8iCta85eEp4=" />
    <input type="hidden" name="formReturnUrl" value="7df29236e0f9b9cc1d2e90e5919ae188cc95d15cf990f469cf05bc67d776174f/thank-you" />

    <div class="form__container container">
        <div class="form__row form__row--flex">
            <div>
                <label for="form-input-fullName" class>Name</label>

                <input class=" " name="fullName" type="text" id="form-input-fullName" data-required />
            </div>
            <div>
                <label for="form-input-email" class>Email</label>

                <input class name="email" type="email" id="form-input-email" data-required />
            </div>
            <div>
                <label for="form-input-cellPhone" class>Contact Number</label>

                <input class=" " name="cellPhone" type="text" id="form-input-cellPhone" />
            </div>
        </div>
    </div>
</form>

[kjmartens]

Thanks for the additional information. I can't seem to see anything in the code that would cause it...

Can you confirm which exact HTML validation are you noticing not working? As in, how are you confirming it's not working, e.g. require fields not required, email address not valid, etc?

And are you able to share links to the forms that I can view? 🙂

[thom-moresoda]

no worries - nor me! its specifically the email validation that I'm trying to get working - its fine on the contact form, but not on the registration form:

Contact form: https://www.britishcytology.org.uk/contact
Registration form: https://www.britishcytology.org.uk/join-us?join-us#registration