HTML5 'required' validation in Ruby on Rails forms

Question

I can't see this question anywhere else, it's hopefully a quick and easy one.

How can I use HTML5 validators, such as 'required', in my forms (ruby on rails)?

Eg, How would this basic form look if I used HTML5 validation in it?

<%=form_for @testimonial do |t|%> 
<dl>
  <dt><label for="testimonial_rating">Rating</label></dt>
  <dd><%=t.select :rating, Testimonial.ratings%></dd>
  <dt><label for="testimonial_content">Comments</label></dt> 
  <dd><%=t.text_area :content, :rows => 3%></dd>
  <dd><button class="button success">Submit Review</button></dd>
</dl>
<%end%>

It goes without saying that server side validation is still required.

You will likely need to use js to get this to work on safari: http://stackoverflow.com/questions/32684657/safari-is-not-acknowledging-the-required-attribute-how-to-fix-it — hii, Sep 24 '16 at 00:14

score 115 · Accepted Answer · edited Sep 23 '14 at 09:07

115

Ah, it was easy :required => true

eg: <%=t.text_area :content, :rows => 3, :required => true%>

edited Sep 23 '14 at 09:07

Jirapong

24,074
10
54
72

answered Nov 24 '12 at 14:26

LpLrich

2,463
2
20
31

any idea how to achieve the same by using simple_form? – Alfie Jan 16 '15 at 06:17
1

same way... required: true – brntsllvn Aug 16 '15 at 00:18

score 40 · Answer 2 · edited Mar 13 '13 at 10:56

40

Just to add on, if you have an email field, you can also use 'pattern' attribute to validate the format of email

<%=form.text_field :email, :required => true, :pattern => '[^@]+@[^@]+\.[a-zA-Z]{2,6}' %>

:)

edited Mar 13 '13 at 10:56

Trung Lê

5,188
5
27
26

answered Nov 24 '12 at 16:16

prashantsahni

2,128
19
20

8

why would you do this when you can use `form.email_field`? – Andrew Hendrie May 13 '15 at 05:45
2

As a side note, never ever try to validate regex with email. It's going to let all sorts of edge cases slip through, or block actually valid ones. You'd be better off allowing everything and checking serverside by trying to send an email and requiring them to click a link in it before anything happens. – Nic Jan 26 '16 at 00:59

score 11 · Answer 3 · answered May 13 '15 at 18:37

11

Addition to @prashantsahni answer. You can also use type = 'email' instead of regex pattern, then your erb-template will look like this:

<%= f.email_field :email, id: 'user_email', type:'email', required: true, placeholder: "Email" %>

More info about form validations using html5

answered May 13 '15 at 18:37

Dmitry Davydov

987
13
21

this failed for me - adding `type: 'email'` did not add any HTML5 validation and allowed me to proceed. – GMarx Jul 14 '16 at 22:24
1

`f.email_field` is already created with `type='email'` as far as I've experienced. – Burak Kaymakci Feb 16 '20 at 16:19

score 5 · Answer 4 · answered Mar 24 '16 at 13:23

This is a little example with the common attributes and for required you only add required:true, but dont forget apply this validations in your backend.

<%= f.text_field
    id: "yourID",
    class: "yourCLass",
    placeholder: "Your message",
    maxlength: 14,
    required: true
%>

score 5 · Answer 5 · answered Apr 17 '19 at 20:55

5

New Syntax <%= f.text_field :email, class: "form-control", required: true %>

answered Apr 17 '19 at 20:55

gsumk

809
10
15

score 4 · Answer 6 · answered Mar 13 '13 at 10:47

4

This could be easily done by adding :required => true parameter into your input fields:

For example

f.text_field :first_name, :required => true
text_field_tag :first_name, nil, :required => true

Pushing the boundary abit further, you could add in pattern matcher for your input, such as email:

f.email_field :email, 'Email', :required => true, :pattern => '[^@]+@[^@]+\.[a-zA-Z]{2,6}'

answered Mar 13 '13 at 10:47

Trung Lê

5,188
5
27
26

Thanks for the pattern matching comment but you really should have read the responses to the question - including my own one - which renders the first part of this answer redundant. You must not have read the other answers. You should really do that before answering here. Not that I know more than you, as you can see I have a very small reputation value compared to yours. – LpLrich Mar 18 '13 at 14:16

score 3 · Answer 7 · answered May 16 '17 at 11:09

3

For completing other answers, there is an awesome gem html5_validations which makes the most of the HTML5 validations reading from ActiveRecord Validations from the model. No extra code needed, just installing it.

answered May 16 '17 at 11:09

Alex Castaño

41
1
6

score 1 · Answer 8 · answered Jul 17 '19 at 19:26

1

Use this if nothing works

include_blank: false, required: true

answered Jul 17 '19 at 19:26

Bilal A.Awan

290
3
7

HTML5 'required' validation in Ruby on Rails forms

8 Answers8

Linked