javascript - Use foundation abide to validate length of a text field? - Stack Overflow

admin管理员组

文章数量:1390836

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

Share Improve this question Follow asked Aug 29, 2013 at 10:22 Daniel RisticDaniel Ristic 71066 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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,}$' %>

本文标签： javascriptUse foundation abide to validate length of a text fieldStack Overflow