validation for form_tag in ruby on rails

Question

I am working on Ruby 2 and rails 4. I want to add html validation 'required' inside the form_tag of Rails.My codes are below.

<%= form_tag file_download_contacts_path, :method => :post, :id => 'contact-form', :class => 'special'  do |f| %>     
   <div><%=  label_tag :Name  %><br />
        <%= text_field_tag "contact[name]" , nil, placeholder: "Your Name" %></div>
    <div><%=  label_tag :Email %><br />
        <%= email_field_tag "contact[email]" , nil, placeholder: "your@mail.com" %></div>
    <div><%=  label_tag :Mobile %><br />
        <%= telephone_field_tag "contact[phone]" , nil, placeholder: "Your Contact No" %></div>
    <div><br /><%= button_tag 'Submit' %></div>  

  <% end %>

click on submit button it directly goes to file_download_contacts_path page though the text areas are blank. How can I prevent this? In Html we can use 'required'. Please help me if any body can. Thank you.

Answer 1

Something like this should help you

$(document).ready(function () {
$(“#contact-form”).validate({
debug: true,
rules: {
“contact[email]“: {required: true, email: true},
“contact[name]“: {required: true, name: true},
“contact[phone]“: {required: true, phone: true}
}
});
});

Source

Answer 2

Rails cannot do any form validation before it's submitted, since the validation needs to happen in the client (and rails is of course server-side). You need to use javascript. If you google "javascript form validation" you will see a tremendous amount of information.

jQuery is a very popular javascript library which has various form validation plugins, google and have a look.

Answer 3

Note: Above answers are all correct and perfect with simple explanation, but in case if you want to show an actual error message to the user, (In case you want to a complex validation), then below answer is for you,

Here In my scenario I have two checkbox in my form, and I want to validate that at least one checkbox should be clicked, if not then I will show a error message to the user.

<%= form_tag( add_to_telegram_path, method: :post, id: 'add-to-telegram-form') do |t| %>
  Select channel
  <%= check_box_tag "channel_names[]", id: 'channel_1'%> Channel 1
  <%= check_box_tag "channel_names[]", id: 'channel_2'%> Channel 2
  <%= button_tag "Send", :class => 'btn btn-success', id: 'add-to-telegram-btn', onclick: "validTelegram()" %>
<%end%>

Then in JS,

function validTelegram() {
  event.preventDefault();
  var checkboxes = Array.from(document.getElementsByName("channel_names[]"));
  if(checkboxes.reduce((acc, curr) => acc || curr.checked, false)){
    $('#add-to-telegram-form').submit();
  } else {
    //swal('Error','Please select atleast one channel!','warning');
    alert('Some error!')
  }
}

• I called a JS function on the submit click of form_tag, (If you are using sibmit_tag replace it with button_tag)
• I have prevented default behaviour of the submit button
• Then I started to get the elements by its Id/Class or by Name, and checked what ever I want to do in the JS, and then based on my validation Either I am calling submit() on the form ID, or showing the error message.

Note: For showing error message I have used Sweet alert, you can stick with the alert();, but in case If you are looking for better UI, then uncomment my swal() code in JS and comment out alert(); You can read more about Sweet Alert PopUp