Menu icon Foundation
Abide Validation - Same error field for multiple inputs - how?!

<div>
  <label>My splitted field <small>required</small></label>
  <div><input type="text" required /></div>
  <div><input type="text" required /></div>
  <div><input type="text" required /></div>
  <small class="error">Required field</small>
</div>
            

         

Hi,

I would like to have something like the code above.

How can I achieve this?

At the moment this activates the small tag on the label and not the one with the error class.

abidevalidationerrormultiplefield

<div>
  <label>My splitted field <small>required</small></label>
  <div><input type="text" required /></div>
  <div><input type="text" required /></div>
  <div><input type="text" required /></div>
  <small class="error">Required field</small>
</div>
            

         

Hi,

I would like to have something like the code above.

How can I achieve this?

At the moment this activates the small tag on the label and not the one with the error class.

Wing-Hou Chan over 5 years ago

Hey Bruno!

I did a test of your markup in CodePen. I'm afraid it won't work.

You will have to validate each field separately like this:

<form data-abide>
  <div>
    <label>My split field<small>required</small>
      <input type="text" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Required field.</small>
    <label>
      <input type="text" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Required field.</small>
    <label>
      <input type="text" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Required field.</small>
  </div>
</form>

Here is a CodePen demo: http://codepen.io/winghouchan/pen/AdaHB

If you elaborate on the function of this we might be able to give you a better solution, but for now you can experiment with this one.

Bruno Couto over 5 years ago

Hi Wind-Hou,

That's not the intended.
I need to be able to show just one error, at least show it in the same position replacing the old one.

So If my first field throws and error it should show, then if I went to the second, the new error message should replace the other.
I believe this should be pretty common. In my situation it's for a code divided in 3 inputs. I don't want so say "the first field is invalid" "the second field is invalid", etc, I want just "the code is invalid, referring to the 3 inputs.

Any ideas how to solve this?

Bruno Couto over 5 years ago

I've just noticed the same happens on the login form of this forum.
Every error shows up below the login form. How can I achieve this?

Rubén Santacruz over 5 years ago

I think that login form is not using Abide.

Wing-Hou Chan over 5 years ago

Hey Bruno!

Now that Ruben has put that option forward I'm also convinced that the login form isn't using Abide. After all I it would be insecure to check usernames and password with client side scripts.

I've thought of a concept for a solution however it would need to 'hack' Abide.