Menu icon Foundation
Separate error messages for empty vs invalid validation

Does anyone have any clever ideas for separating out the error messages for an empty required field vs a field filled in with invalid data?

On my project we have separate errors for empty vs incorrect data ("This field is required" vs "Please use only numbers") and it can be confusing, and long, to put both messages into the same error.

Having an option for a separate empty-error would be very very helpful, but it doesn't appear that Abide really differentiates between the two failures; it's just invalid.

abideformvalidationmultiple validationfeature request

Does anyone have any clever ideas for separating out the error messages for an empty required field vs a field filled in with invalid data?

On my project we have separate errors for empty vs incorrect data ("This field is required" vs "Please use only numbers") and it can be confusing, and long, to put both messages into the same error.

Having an option for a separate empty-error would be very very helpful, but it doesn't appear that Abide really differentiates between the two failures; it's just invalid.

Rafi Benkual over 5 years ago

Interesting. We will add it to our feature request list. Thanks for tagging it as such. Anyone done this before?

Rubén Santacruz about 5 years ago

Hi, Alana and Rafi.

I also find this feature mandatory from an UX point of viewpoint.

Currently I am trying a workaround involving custom validators. It does not convince me at all, but is the best that came to my mind for a quick solution.

I handle validation through a custom function and there I change the error message according to the state of the validation. There are some cons, for example I have to write a new RegExp even if it is present in the provided patterns. I could improve it by parsing the "pattern" and "type" attributes from the input element but I think it would be still a a little messy because I should repeat in my custom function part of the code present in check_validation_and_apply_styles().

Also I think it wouldn't work with some special cases involving radio buttons or checkboxes because they appear before custom validation in the execution flow of check_validation_and_apply_styles().

Definitely this feature should be provided in an easy way from Abide's core.

Rafi, I haven't seen this feature request on Github. Should I fill a new issue?

<!doctype html>
<html class="no-js" lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Foundation | Abide</title>
   <link rel="stylesheet" href="css/normalize.css" />    
   <link rel="stylesheet" href="css/foundation.css" />   
   <script src="js/vendor/modernizr.js"></script>
</head>
<body>
   <div class="row">
      <div class="small-12 columns">
         <h1>Abide form validator</h1>
         <h2>Custom validator</h2>
         <p></p>
         <form data-abide id="myForm">
            <div id="name-field">
               <label for="name">Name <small>required</small>
                  <input type="text" required id="name" data-abide-validator="myValidator">
               </label>
               <small class="error" id="error_message">Your name is required. It can only contain letters and whitespaces.</small>
            </div>            
            <button type="submit">Submit</button>
         </form>         
      </div>
   </div>
   <script src="js/vendor/jquery.js"></script>
   <script src="js/vendor/fastclick.js"></script>
   <script src="js/foundation/foundation.js"></script>
   <script src="js/foundation/foundation.abide.js"></script>
   <script type="text/javascript">
      $(document).foundation({
         abide: {
            validators: {
               myValidator: function(el, required, parent) {
                  var emptyStringRegEx = /^$/;
                  var validRegExp = /^[A-Za-z ]+$/;
                  var result = false;                  
                  if (emptyStringRegEx.test(el.value.trim())) {
                     console.log("The input is empty. Input value: '" + el.value + "'");
                     if (required) {
                        $("#error_message").text("Your name cannot be empty.");
                     }
                     else {
                        result = true;
                     }
                  }
                  else {
                     if (validRegExp.test(el.value)) {
                        console.log("The input is valid. Input value: '" + el.value + "'");
                        result = true;
                     }
                     else {
                        console.log("The input is invalid. Input value: '" + el.value + "'");
                        $("#error_message").text("Your name can only contain letters and whitespaces.");
                     }
                  }
                  return result;
               }
            }
         }
      });
   </script>
</body>

Gaurish Patil almost 4 years ago

Hi,
thanks Ruben , you made it easy.
@Rafi Benkual , is this added in feature list.

Rafi Benkual almost 4 years ago

It is on our roadmap for the next version of Foundation. In the meantime, a Pull Request would really help people.