This project is archived and is in readonly mode.

#5120 open
Akira Matsuda

automatic client side validation with HTML 5 "required" attribute

Reported by Akira Matsuda | July 15th, 2010 @ 12:39 PM | in 3.1

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.

Comments and changes to this ticket

  • ifesdjeen

    ifesdjeen July 15th, 2010 @ 01:27 PM

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

  • Rohit Arondekar

    Rohit Arondekar July 16th, 2010 @ 01:40 PM

    • 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?

  • Akira Matsuda

    Akira Matsuda August 29th, 2010 @ 12:51 AM

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

  • Jeremy Kemper

    Jeremy Kemper August 29th, 2010 @ 01:05 AM

    • 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.

  • Alexander S.

    Alexander S. October 29th, 2010 @ 04:27 PM

    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

  • Jeff Kreeftmeijer

    Jeff Kreeftmeijer November 1st, 2010 @ 05:03 PM

    • Tag cleared.

    Automatic cleanup of spam.

  • Christian Peters

    Christian Peters December 10th, 2010 @ 10:39 AM

    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.)

  • Akira Matsuda

    Akira Matsuda December 26th, 2010 @ 10:48 PM

    • 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.

  • Akira Matsuda

    Akira Matsuda December 26th, 2010 @ 10:55 PM

    Reworded the typos on commit comments.

  • Christian Peters

    Christian Peters December 27th, 2010 @ 02:20 PM

    @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...?

  • bingbing

    bingbing March 26th, 2011 @ 01:39 AM

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

<h2 style="font-size: 14px">Tickets have moved to Github</h2>

The new ticket tracker is available at <a href="https://github.com/rails/rails/issues">https://github.com/rails/rails/issues</a>

People watching this ticket

Attachments

Tags

Pages