Menu icon Foundation
Multiple error on a form field

Hi all,

I was wondering how I can put several validations and error messages using Abide on a form field.

example of what I'm trying to accomplish : make sure an email is valid and also not duplicate in a database table ?

when showing the form for the 1st time I have this :

<input type="email" id="login" name="login" required="required">
<small class="error">Please enter a valid email address</small>         

On the form submission, if the login is already in a table, I return the form with the appropriate message like this :

<div class="error"> <!-- display the error message -->
  <input type="email" id="login" name="login" required="required">
 <small class="error">Already registered!</small>
</div>   

Now, if the user try to enter an invalid email, the message will show "Already registered!" which is not the case yet.

Thanks in advance.

abideformmultiple validationvalidation

Hi all,

I was wondering how I can put several validations and error messages using Abide on a form field.

example of what I'm trying to accomplish : make sure an email is valid and also not duplicate in a database table ?

when showing the form for the 1st time I have this :

<input type="email" id="login" name="login" required="required">
<small class="error">Please enter a valid email address</small>         

On the form submission, if the login is already in a table, I return the form with the appropriate message like this :

<div class="error"> <!-- display the error message -->
  <input type="email" id="login" name="login" required="required">
 <small class="error">Already registered!</small>
</div>   

Now, if the user try to enter an invalid email, the message will show "Already registered!" which is not the case yet.

Thanks in advance.

Jordan Humphreys over 5 years ago

Your best bet might be to have a different error class for errors that come from the database, ex server-error. This way you can have your server side error classes alongside your client-side validations from Foundation:

<div class="error"> <!-- display the error message -->
  <input type="email" id="login" name="login" required="required">
  <small class="error">Please enter a valid email address</small>    
  <small class="server-error">Already registered!</small>
</div>

Yan Bilodeau over 5 years ago

You're the best Jordan, thanks a lot