I'm using foundation in a rails app and I'm looking for a way to validate the length of text fields in a form: I'd like to display an error when the text field contains too many characters (but not when it's empty).

I tried to use Foundation's abide and create custom named patterns as explained in the docs.

Here are the contents of my application.js file including the custom patterns upon Foundation initialization:

$(function(){ 
  $(document)
    .foundation()
    .foundation('abide', {
      patterns: {
        short_field: /^.{,40}$/,
        long_field: /^.{,72}$/
      }
    }); 
});

And here is my form code in the view:

<form data-abide>
  <div class="long-name-field">
    <input type="text" pattern="long_field" placeholder="Long Field">
    <small class="error">Too long.</small>
  </div>
  <div class="short-name-field">
    <input type="text" pattern="short_field" placeholder="Short Field">
    <small class="error">Too long.</small>
  </div>
</form>

The problem is that when I load my form page all the fields always display the error message, whether they're empty, filled under their character limit or exceeding their character limit.

Anyone successfully used abide to do something similar (or knows a better way that is not using custom named patterns)?

Cheers.

I'm using foundation in a rails app and I'm looking for a way to validate the length of text fields in a form: I'd like to display an error when the text field contains too many characters (but not when it's empty).

I tried to use Foundation's abide and create custom named patterns as explained in the docs.

Here are the contents of my application.js file including the custom patterns upon Foundation initialization:

$(function(){ 
  $(document)
    .foundation()
    .foundation('abide', {
      patterns: {
        short_field: /^.{,40}$/,
        long_field: /^.{,72}$/
      }
    }); 
});

And here is my form code in the view:

<form data-abide>
  <div class="long-name-field">
    <input type="text" pattern="long_field" placeholder="Long Field">
    <small class="error">Too long.</small>
  </div>
  <div class="short-name-field">
    <input type="text" pattern="short_field" placeholder="Short Field">
    <small class="error">Too long.</small>
  </div>
</form>

The problem is that when I load my form page all the fields always display the error message, whether they're empty, filled under their character limit or exceeding their character limit.

Anyone successfully used abide to do something similar (or knows a better way that is not using custom named patterns)?

Cheers.

• javascript
• ruby-on-rails
• zurb-foundation

2 Answers 2

I finally managed to make it work!

The problem was that /^.{,40}$/ is not a valid regexp syntax, you have to use /^.{0,40}$/ explicitly.

I mistake it with the /.{5,}/ syntax that you can use to impose a only a lower limit.

I could not make the javascript abide work in my Rails 4 app, so I just added the regex directly as an attribute like so:

<%= text_area_tag 'answer', @current_answer,
        :placeholder => 'required', :required => '', :pattern => '^(.){0,1000}$' %>

For validating minimum length only I use:

<%= text_area_tag 'answer', @current_answer,
        :placeholder => 'required', :required => '', :pattern => '^(.){100,}$' %>