Foundation-sites: [Abide] Form error does not show when form element labels are siblings

[jontro]

How can we reproduce this bug?

1. Step one
   Create a form like this:

<form data-abide>
<label>
  <input type="text"  required/>
  <span class="form-error" >Error message</span>
</label>
<input type="text"/>
</form>

What did you expect to happen?
Form error should show class should show (get the is-visible-class
What happened instead?
Does not show

Problem lies in

 findFormError($el) {
    var $error = $el.siblings(this.options.formErrorSelector);

    if (!$error.length) {
      $error = $el.parent().find(this.options.formErrorSelector); <--- Fallback which triggers on $el pointing to the last the input type="text"
    }
    return $error;
  }

[designerno1]

add a novalidate attribute to the form element and it works fine for me

[jontro]

@designerno1 are you sure about this? We have the novalidate in our form (missed it in my example). As you can see in findFormError it will look in the parents if it doesnt find a sibling element, which incorrectly selects the "form-error" class attached to the other input

[designerno1]

@jontro
you are right now i see the error, i try to debug

[designerno1]

@jontro
ok only thing i see at the moment is to wrap the second input in an element like a label tag or div element

<form data-abide novalidate>
  <label>
  <input type="text" required />
  <span class="form-error" >Error message</span>
</label>
  <label><input type="text" /></label>
  <button class="button" type="submit" value="Submit">Submit</button>
</form>

[jontro]

Yeah. That's why I reported the bug ;) The problem was finding out why it behaved this way, might be good to update the documentation in case this behaviour is intended / hard to fix

[djohnson]

This issue just bit me on a form where the submit was a simple <input type="submit"> that was not wrapped, while the rest of the inputs with required were wrapped by divs. Codepen example with working and not working code

This might warrant it's own bug report since it doesn't make much sense for an input of type submit to impact abide except to trigger the validation.

[stevewinni-cc]

We have found the same issue, when creating complex styled forms the validator works but it does not show the error messages;

<form data-abide novalidate action="thank-you-check.php" method="post" enctype="multipart/form-data">

            <div class="step-1">
                <h3><span class="reveal-step">Step 1</span> – enter your details:</h3>

                    <input name="honey" type="text"  class="hide">
                     <div class="row reveal-list">
                            <div class="columns medium-6">

                                    <select name="Title" >
                                        <option>Title*</option>
                                        <option>Mr</option>
                                        <option>Ms</option>
                                        <option>Miss</option>
                                        <option>Mrs</option>
                                        <option>Dr</option>
                                    </select>
                                    <label>
                                    <input name="Surname" type="text" placeholder="Surname*" required pattern="text" />
                                    <span class="form-error"> Surname Required </span> 
                                    </label>

                                    <label>
                                    <input name="Name" type="text" placeholder="First name*" required pattern="text" />
                                    <span class="form-error"> Name Required </span> 
                                    </label>

                                    <input name="Middle Name" type="text" placeholder="Middle name"  />
                                    <input name="DOB" type="text" placeholder="Date of birth"  />
                                    <input name="Telephone" type="text" placeholder="Phone number"  />



                            </div>
                            <div class="columns medium-6">

                                <label>
                                    <input name="Address1" type="text" placeholder="Address line 1*" required pattern="text" />
                                    <span class="form-error"> Address Required </span> 
                                    </label>

                                    <label>
                                    <input name="Address2" type="text" placeholder="Address line 2*" required pattern="text" />
                                    <span class="form-error"> Address Required </span> 
                                    </label>

                                    <input name="Address3" type="text" placeholder="Address line 3" />
                                    <input name="Address4" type="text" placeholder="Address line 4" />
                                    <label>
                                    <input name="Postcode" type="text" placeholder="Postcode*" required />
                                     <span class="form-error"> Postcode Required </span> 
                                     </label>

                            </div>
                        </div>

            </div>
            <div class="step-2">
                <h2><span class="reveal-step">Step 2</span> – read through the data protection statement:</h2>
                <p>
                    In order for UK Carbon Care Ltd to confirm whether you are entitled to ECO Affordable Warmth funded measures, we will share your personal data with our trusted third party service provider, the Energy Saving Trust, and with the Department for Work and Pensions. Your details will be used as follows to assess your eligibility for the service, we will:
                </p>
                <ul>
                    <li>
                        Get in touch with the Department for Work and Pensions via the Energy Saving Trust to check if you may be eligible for this assistance.
                    </li>
                    <li>
                        Receive information from the Department for Work and Pensions about you,   this will be limited to information relating to your entitlement to assistance.
                    </li>
                    <li>
                        Share your details with our service provider Energy Saving Trust so they can  check if you may be eligible for this assistance and provide services to us.
                    </li>
                    <li>
                        Share your details with the scheme administrator, Ofgem, so they can review the scheme.
                    </li>
                </ul>
                <div class="agree-wrap">
                    <h4><span>Please tick the following</span> to agree to allow us to confirm your eligibility for the grant:</h4>

                        <div class="check-group clearfix">
                            <input name="Data Protection" type="checkbox" id="check1" required />
                            <span class="check-ui"></span>
                            <label for="check1">I, the customer acknowledge that I have read and understood the Data Protection Statement at the top of this page</label>
                        </div>
                        <div class="check-group clearfix">
                            <input name="Data Sharing" type="checkbox" id="check2" required />
                            <span class="check-ui"></span>
                            <label for="check2">I hereby give my consent for the appropriate and necessary data being shared with the Energy Saving Trust and The Department for Work and Pensions. </label>
                        </div>
                        <p class="accknowlegment">
                            I hereby give my consent for the appropriate and necessary data being shared with the Energy Saving Trust and The Department for Work and Pensions.
                        </p>
                        <div><div><button type="submit" class="btn green-btn"  >Accept and continue</button></div></div>




                </div>
            </div>
            </form>

[IamManchanda]

Hey @stevewinni-cc please use markdown like this below for next time

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}```

See

• https://guides.github.com/features/mastering-markdown/
• https://help.github.com/articles/creating-and-highlighting-code-blocks/

I have edited your comment for this time :)

[mikeevstropov]

I'm always using JS that force to show error message.

<div class="input-group">
    <input type="text" class="input-group-field" id="my-input">
    <div class="input-group-button">
        <button class="button" type="submit"></button>
    </div>
</div>

<span class="form-error" data-form-error-for="my-input">
    Сообщение не должно быть короче 8 символов
</span>

/* ZURB Foundation Plugin ABIDE */
$(document).on('invalid.zf.abide', function (e) {
    $('.form-error[data-form-error-for="'+ e.target.id +'"]').addClass('is-visible');
});

$(document).on('valid.zf.abide', function (e) {
    $('.form-error[data-form-error-for="'+ e.target.id +'"]').removeClass('is-visible');
});

[stevewinni-cc]

Update - After looking at this it appears that Abide wanted all of the Inputs surrounded by labels not just the ones which were being validated against. once all inputs were enclosed with labels the error messages showed correctly...

[matbandeli]

@mikeevstropov Thanks for your solution. Your code solved my problem. My "form-error" spans where never visible when used with "data-form-error-for" attribute.
Sample of my code :

<div class="row">
    <div class="small-5 large-6 columns">
        <label for="input_zpiece" class="text-right middle">Z Pièce</label>
    </div>
    <div class="small-7 large-6 columns">
        <div class="input-group">
            <input id="input_zpiece" name="input_zpiece" class="input-group-field" type="number" required pattern="positive_integer" data-validator="greater_than smaller_than" data-greater-than="0" data-smaller-than="10001">
            <span class="input-group-label">dents</span>
        </div>
        <span class="form-error" data-form-error-for="input_zpiece">
               Il faut entrer un nombre entier (par ex. : 9) entre 1 et 10000
        </span>
    </div>
</div>

[DanielRuf]

Update - After looking at this it appears that Abide wanted all of the Inputs surrounded by labels not just the ones which were being validated against. once all inputs were enclosed with labels the error messages showed correctly...

a11y wise they should be always have a label

[ncoden]

If I understand this issue correctly, this is a duplicate of #7802. I replied to it in https://github.com/zurb/foundation-sites/issues/7802#issuecomment-361083271.

I looked further and I can confirm that this is not a bug. Foundation automatically detect form errors in the same parent than the <input>, but we cannot extends this behavior without creating conflicts between fields.

Globally, this is always a good thing to explicitely declare relations between elements. So the recommanded usage is to use data-form-error-for="inputId" to declare this relation without depending on the form error and field positions.

The following usage is recommended:

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="text" id="exampleInput" required>
</div>
<span class="form-error" data-form-error-for="exampleInput">Please enter amount.</span>

The following work arounds are NOT recommended:

• Changing the form error CSS
• Changing the HTML template just to "get it works".
• Using [data-abide-error] in the form error (or it will be displayed when any field in the form in invalid)

See: https://foundation.zurb.com/sites/docs/abide.html#form-errors

[DanielRuf]

Closing as the other issue is also closed as resolved.