Validation when only spaces inserted - Foundation Abide

Question

I`m a beginner in Foundation. I just got a task to fix issues in a form created with Foundation. And its validation is done with Foundation Abide. The issue is, in the HTML i can see "required" is added, and when we add only spaces in input field, validation accepts it as normal string. When the input field is left empty, validation working fine, it showing error message "This field is required".

I want the validation to return error "This field is required", when user enter only spaces in input field. Any idea how this is done?

<input required type="text" name="first_name" placeholder="First name">

Answer 1

You could just create a custom pattern matcher for the field. Find in your code base where you're keeping your abide patterns, add something like

abide : {
  patterns: {
    characters_only: /[A-Za-z]+/, // this will match only letters 
  }
}

then add the pattern to your input element

<input required type="text" name="first_name" placeholder="First name" pattern='characters_only'>

You might have to add the error message yourself, as in -

<small class='error'>First name must only contain characters/</small>

Check here for more details -

https://foundation.zurb.com/sites/docs/v/5.5.3/components/abide.html#custom-named-patterns