Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

This project is archived and is in readonly mode.

automatic client side validation with HTML 5 "required" attribute

#5120

HTML 5 has a new attribute named required attribute and ActiveModel::Validators lets us easily know what kind of validations are defined on our models.

So, I came up with another new feature combining these two technologies.

Now, when creating a form with a model which has validates_presence_of field,

class User < ActiveRecord::Base
  validates_presence_of :name
end

<%= form_for User.new do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>
the required="required" attribute are automagically injected into the generated input field.
<input id="user_name" name="user[name]" required="required" size="30" type="text" />

This enables seamless client-side validation without any extra JavaScript coding.

Reported by Akira Matsuda · July 15th, 2010 @ 12:39 PM

State: open
Milestone: 3.1
Assigned to: nobody
Importance: Low

Activity

  1. ifesdjeen
    ifesdjeen

    +1 for that. i like the idea, and would use that, definately.

    July 15th, 2010 @ 01:27 PM

  2. Rohit Arondekar
    Rohit Arondekar
    • State changed from new to open
    • Importance changed from to Low

    +1 Awesome idea!

    But what about other validations that imply that the field is required? Will this also work for those?

    July 16th, 2010 @ 01:40 PM

  3. Akira Matsuda
    Akira Matsuda

    Updated the patch so that it applies to the current edge.

    August 29th, 2010 @ 12:51 AM

  4. Jeremy Kemper
    Jeremy Kemper
    • Milestone set to 3.1

    Nice!

    object.class.respond_to?(:validators) && object.class.validators.any? do |v|
  v.is_a?(ActiveModel::Validations::PresenceValidator) && (v.attributes.include? method_name.to_sym) && v.options.keys.none? {|k| [:if, :unless].include? k}
end

    This is a bit of a hack though :) Perhaps this check could be extracted to Active Model.

    August 29th, 2010 @ 01:05 AM

  5. Alexander S.
    Alexander S.

    Just a short note, on something you are probably already aware of.

    There are a few more attributes in HTML5 that are similar to required and would map nicely onto Rails model validators. Among them are min/max for input type number and range. There is also a pattern attribute which is simply a regular expression.

    http://miketaylr.com/code/input-type-attr.html

    October 29th, 2010 @ 04:27 PM

  6. Jeff Kreeftmeijer
    Jeff Kreeftmeijer
    • Tag cleared.

    Automatic cleanup of spam.

    November 1st, 2010 @ 05:03 PM

  7. Christian Peters
    Christian Peters

    I think this would be an important feature of the form helpers as it follows the DRY principle.

    Though - as mentioned in the patch - it won't be possible to have full consistency between models and forms when using :if / :unless option. In the model, the condition is evaluated in the context of what has happened after submitting the form and running the controller action until object.valid? is called. I would add a warning in the validates_presence_of? doc.

    According to Alexander's link, the required option should also be provided for text areas, check boxes and radio buttons. (The patch regards input fields only.)

    December 10th, 2010 @ 10:39 AM

  8. Akira Matsuda
    Akira Matsuda
    • Tag set to actionview, activemodel, edge, patch, radio_button_tag, rails3.1, tested, text_area_tag, text_field, validates_length_of, validates_numericality_of, validates_presence_of, validations

    Thank you guys for your comments!

    @Jeremy: Em... sorry for posting ugly code :< I know it was ugly, but I just wanted to know whether my idea was good or bad... I should be ashamed for that...
    I just rewrote my patch taking your advice, so could you please take a look again?

    @Alexander S.: Thank you for you helpful comment! I implemented min/max attributes this time, but as for RegExp one, I guess it won't always work the same on server side and client side, so we need to consider a bit more deeper.
    How about adding a new key for FormatValidator like:

     :client_side => false
    which adds the "pattern" attribute on the HTML tag if true?

    @Christian: Yes, added the attribute for text_area and radio_button. Thanks! But check_box didn't work as expected unlike radio_button on my Opera 11 (it requires all check_boxes to be checked), so didn't touch it.

    @all: Attached a new patch for required/min/max/maxlength attributes with cleaner code.
    Hope you to play with it on modern browsers, and give me your feedbacks.

    December 26th, 2010 @ 10:48 PM

  9. Akira Matsuda
    Akira Matsuda

    Reworded the typos on commit comments.

    December 26th, 2010 @ 10:55 PM

  10. Christian Peters
    Christian Peters

    @Akira: What do you mean by "it requires all check_boxes to be checked"? I was thinking about a use case like validates_presence_of :terms_and_conditions_acceptance resulting in the respective checkbox to have a required="required" attribute. The rest is not our business...?

    December 27th, 2010 @ 02:20 PM

  11. bingbing
    bingbing

    March 26th, 2011 @ 01:39 AM