Multiple forms on one page display required field errors when only one form is submitted

Question

I've got a page on my site with two freeform forms, each have different purposes. If I fill out either of the forms entirely (required fields) I am taken to the correct landing page and the correct notification is being sent out so all is functioning correctly there.

If do not enter all required fields the inline errors appear but for both forms rather than for the form I submitted.

Does anyone know of any way to make it so that the errors appear only on the submitted form?

I'm happy to create an extension using either the freeform_module_validate_begin or freeform_module_validate_end hooks but I'm just not sure where to start.

Any help would be greatly appreciated.

{exp:freeform:form form_name="product_demo_form" form:id="demo-form" required="name|email" return="{path='demo-enquiry-success'}" inline_errors="yes" inline_error_return="products/{url_title}/#demo-form"}
    <input type="hidden" name="XID" value="{XID_HASH}" />
    <input type="hidden" name="product_name" value="{title}" />
    <div class="row">
        <div class="col-md-4">
            {if freeform:error:name}<span class="required">{form_error_name}</span>{/if}
            {freeform:field:name attr:placeholder="Name *"}
        </div>
        <div class="col-md-4">
            {if freeform:error:email}<span class="required">{form_error_email}</span>{/if}
            {freeform:field:email attr:placeholder="Email *"}
        </div>
        <div class="col-md-4">
            {freeform:field:phone attr:placeholder="Phone"}
        </div>
     </div>
    {freeform:submit}
{/exp:freeform:form}

{exp:freeform:form form_name="product_pdf_download" form:id="download-form" required="name|email" return="{path='download-request-successful'}" inline_errors="yes" inline_error_return="products/{url_title}/#download-form"}
    <input type="hidden" name="XID" value="{XID_HASH}" />
    <input type="hidden" name="product_id" value="{entry_id}" />
    <input type="hidden" name="product_name" value="{title}" />
    <div class="row">
        <div class="col-md-6">
            {if freeform:error:name}<span class="required">{form_error_name}</span>{/if}
            {freeform:field:name attr:placeholder="Name *"}
        </div>
        <div class="col-md-6">
            {if freeform:error:email}<span class="required">{form_error_email}</span>{/if}
            {freeform:field:email attr:placeholder="Email *"}
        </div>
    </div>
    {freeform:submit}
{/exp:freeform:form}

Answer 1

I believe you can do some PHP jiggery-pokery here, what you'll want to do is on the template page use PHP to detect which form was submitted (you could set a hidden POST value here, or check the posted collection parameter maybe). Then do unset($_POST['field_id']); for each of the fields on the other (not to display validation messages) form.

If there's no value in the $_POST it might not throw a validation message, but I'd have to double check this.

I'll try to spin a test up later this week for you, otherwise I'd definatly inspect the $_POST array on this template after submitting an invalid form

Scrap that...

I have spun an example up, and have found your answer...

The problem is you are using the same field's on both forms. A quick fix would be to recreate the fields for form 2 with different ID's, this will seperate your values and validation messages...

Example template :

<h3>Form 1</h3>
{exp:freeform:form
    form_name="form1"
    required="test_text_1"
    inline_errors="yes"
}
        {if freeform:error:test_text_1}
            <span class="error">
                {freeform:error:test_text_1}
            </span>
        {/if}
<p><label>{freeform:label:test_text_1}</label> {freeform:field:test_text_1}</p>
<p>{freeform:submit}</p>
{/exp:freeform:form}

<hr />
<h3>Form 2</h3>
{exp:freeform:form
    form_name="form2"
    required="test_text2"
    inline_errors="yes"
}
        {if freeform:error:test_text2}
            <span class="error">
                {freeform:error:test_text2}
            </span>
        {/if}
<p><label>{freeform:label:test_text2}</label> {freeform:field:test_text2}</p>
<p>{freeform:submit}</p>
{/exp:freeform:form}

This one works a treat, seperated error messages. If you absolutely MUST have the same fields...

2 Forms, 1 Field

We have to do some foolery here, first things first, we need to create a field in freeform, lets call it fid. This field is required so we can pass the forms ID through Freeform (it cleans fields that arn't part of the form collection).

So as per the example above each form collection has a fid field and a test_text_1 field. Dont worry, we're never going to display or use this field, its just so we can track through...

Then edit your template to be this (PHP on Input) :

<?php
//this variable holds the passed form ID, if submitted
$submittedFid = NULL;

//get the freeform params ID (needed for later)
$paramsId = ee()->session->flashdata('freeform_errors');

//was there a params ID set (if not there's no submission, continue)
if ( !empty( $paramsId ) ) {

    //get the freeform params info from the db
    $res = ee()->db->where('params_id', $paramsId)->get('freeform_params');

        //if we have a result, gravy! lets sniff for the submitted form ID
    if ( $res !== FALSE ) {

                //extract the data/info
        $res = array_shift($res->result_array());
        $paramInfo = json_decode($res['data'], TRUE);

                //did we have a form ID passed through?? 
        if ( !empty( $paramInfo['inputs']['fid'] ) ) {

                        //set the form ID that was submitted
            $submittedFid = $paramInfo['inputs']['fid'];
        }
    }
}
?>

{!-- Here we display form 1 --}
<h3>Form 1</h3>
{exp:freeform:form
    form_name="form1"
    required="test_text_1"
    inline_errors="yes"
}
    {!-- here we pass our super secret FID! for this one its '1st_form' --}
    <input type="hidden" name="fid" value="1st_form" /> 

    {!-- Display the field --}
    <p><label>{freeform:label:test_text_1}</label> {freeform:field:test_text_1}</p>

    {!-- Display Error messages if any. First use PHP to see if this is the right form --}
    <?php if( !empty($submittedFid) && $submittedFid == "1st_form" ) { ?>
                {!-- Standard Fredform error syntax --}
            {if freeform:error:test_text_1}
                <span class="error">{freeform:error:test_text_1}</span>
            {/if}
    <?php } ?>

    {!-- submit button --}
    <p>{freeform:submit}</p>

{/exp:freeform:form}

<hr />
{!-- Here we display form 2 --}
<h3>Form 2</h3>
{exp:freeform:form
    form_name="form2"
    required="test_text_1"
    inline_errors="yes"
}
    {!-- here we pass our super secret FID! for this one its '2nd_form' --}
    <input type="hidden" name="fid" value="2nd_form" /> 

    {!-- Display the field --}
    <p><label>{freeform:label:test_text_1}</label> {freeform:field:test_text_1}</p>

    {!-- Display Error messages if any. First use PHP to see if this is the right form --}
    <?php if( !empty($submittedFid) && $submittedFid == "2nd_form" ) { ?>
                {!-- Standard Fredform error syntax --}
            {if freeform:error:test_text_1}
                <span class="error">{freeform:error:test_text_1}</span>
            {/if}
    <?php } ?>

    {!-- submit button --}
    <p>{freeform:submit}</p>

{/exp:freeform:form}

There you have it! tested and works a treat (EE 2.9.2 + Freeform 4.2.2).

As always if this gets you there, help the site and please mark as the answer.