Repository files navigation

Automatic client-side validation using HTML5 Form Validation

html5_validators is a gem/plugin for Rails 3+ that enables automatic client-sidevalidation using ActiveModel + HTML5. Once you bundle this gem on your app,the gem will automatically translate your model validation code into HTML5validation attributes on everyform_for invocation unless you explicitlycancel it.

• Model

classUserincludeActiveModel::Validationsvalidates_presence_of:nameend

• View

<%= f.text_field :name%>

othertext_fieldish helpers,text_area,radio_button, andcheck_box are also available

• HTML

<inputid="user_name"name="user[name]"required="required"type="text"/>

• SPEC

http://dev.w3.org/html5/spec/Overview.html#attr-input-required

• Model

classUserincludeActiveModel::Validationsvalidates_length_of:name,maximum:10end

• View

<%= f.text_field :name%>

text_area is also available

• HTML

<inputid="user_name"maxlength="10"name="user[name]"size="10"type="text"/>

• SPEC

http://dev.w3.org/html5/spec/Overview.html#attr-input-maxlength

• Model

classUserincludeActiveModel::Validationsvalidates_numericality_of:age,greater_than_or_equal_to:20end

• View (be sure to use number_field)

<%= f.number_field :age%>

• HTML

<inputid="user_age"min="20"name="user[age]"size="30"type="number"/>

• SPEC

http://dev.w3.org/html5/spec/Overview.html#attr-input-maxhttp://dev.w3.org/html5/spec/Overview.html#attr-input-min

🚧

There are four ways to cancel the automatic HTML5 validation.

Setauto_html5_validation: false toform_for parameter.

• View

<%= form_for @user, auto_html5_validation: false do |f|%>  ...<% end%>

Setauto_html5_validation = false attribute to ActiveModelish object.

• Controller

@user=User.newauto_html5_validation:false

• View

<%= form_for @user do |f|%>  ...<% end%>

Setauto_html5_validation = false to ActiveModelish class' class variable.This configuration will never be propagated to inherited children classes.

• Model

classUser <ActiveRecord::Baseself.auto_html5_validation=falseend

• Controller

@user=User.new

• View

<%= form_for @user do |f|%>  ...<% end%>

Setconfig.enabled = false to Html5Validators module.Maybe you want to put this in your test_helper, or add a controller filter asfollows for development mode.

• Controller

# an example filter that disables the validator if the request has {h5v: 'disable'} paramsaround_actiondo |controller,block|h5v_enabled_was=Html5Validators.enabledHtml5Validators.enabled=falseifparams[:h5v] =='disable'block.callHtml5Validators.enabled=h5v_enabled_wasend

• Ruby 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 3.0, 3.1, 3.2, 3.3 (trunk)

• Rails 3.2.x, 4.0.x, 4.1, 4.2, 5.0, 5.1, 5.2, 6.0, 6.1, 7.0, 7.1 (edge)

• HTML5 compatible browsers

Put this line into your Gemfile:

gem'html5_validators'

Then bundle:

% bundle

When accessed by an HTML5 incompatible legacy browser, these extra attributeswill just be ignored.

• more validations

Copyright (c) 2011 Akira Matsuda. See MIT-LICENSE for further details.