I work on app which have bootstrap modal(for sign in/registration) where client side validation is performed. When you try to sign in with regular, but non existing email in db, server side validation is performed and you are redirected to users/signin page.
So, instead of that redirection, I need to make validations on client side and show error message in modal. Problem is, I work on real, big app for first time and I cant find place where those validations and redirections are performed. I can't find any relevant JS file or controller actions..
User model:
validates :password, presence: true, :on => :create
validates :password, confirmation: true, :on => :create
validates :email, presence: true
validates :username, uniqueness: true, presence: true
validates_format_of :username, :with => /^[a-z\d]*$/, :message => "Just letters and numbers please"
Modal for registration:
#modal-registration.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "registrationLabel", role: "dialog", tabindex: "-1"}
.modal-header
%button.close{"aria-hidden" => "true", "data-dismiss" => "modal", type: "button"} ×
%h3#myModalLabel Registration
.modal-body
.row-fluid
.span6
= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { class: "form", id: "registration-form" }, :validate => true) do |f|
.control-group
.controls
= f.input :email, autofocus: true, label: false, placeholder: 'email'
.control-group
.controls
= f.input :username, autofocus: true, label: false, placeholder: 'Username'
.control-group
.controls
= f.input :password, label: false, placeholder: 'Password'
.control-group
.controls
= f.input :password_confirmation, label: false, placeholder: 'Password confirmation'
.control-group
.controls
= f.button :submit, "Registration"
.span6
= link_to "Registration via Facebook", "#", class: "btn btn-large btn-block"
= link_to "Registration via LinkedIn", "#", class: "btn btn-large btn-block"
.modal-footer
%button.btn{"aria-hidden" => "true", "data-dismiss" => "modal"} Close
Client_side_validation jQuery:
jQuery ->
$("#modal-registration, #modal-sign-in").on "shown", ->
$(ClientSideValidations.selectors.forms).validate()
Used gems: devise, client_side_validations, client_side_validations_simple_form, bootstrap, haml.
Did you try rails bootstrap forms gem?
You can do client side validations with rails bootstrap forms gem easily
You only need to add remote: true code, for example:
= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :remote => true) do |f|
= f.email_field :email
= f.text_field :username
= f.password_field :password
= f.password_field :password_confirmation
= f.submit
Related
I know I must be missing something simple. I have a model that contains a validate_confirmation_of. I know it works in my model (I've tested it using the console) but for some reason, it seems the confirmation field on the form isn't linking into my model correctly and so the model thinks the confirmation field is blank and thus skips the validate.
Model
class Person < ActiveRecord::Base
enum status: { suspended: 0, pending_validation: 1, pending_setup: 2, registered: 3, unknown: 99 }
EMAIL_REGEX = /\A[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}\Z/i
validates :first_name, :presence => true, :length => { :maximum => 255 }
validates :last_name, :presence => true, :length => { :maximum => 255 }
validates :email_address, :presence => true, :length => { :maximum => 255 }, :uniqueness => true, :format => { :with => EMAIL_REGEX }, :confirmation => true
validates :country_code, :presence => true
end
View
<%= form_for #person, url: { action: 'create' } do |f| %>
<fieldset class="registration">
<legend>Your Information</legend>
<div class="group column-1">
<%= label_tag('First Name') %> <span class="required">*</span>
<%= f.text_field :first_name, class: 'form-control', :tabindex => 1 %>
<%= label_tag('Display Name') %>
<%= f.text_field :display_name, class: 'form-control', :tabindex => 3 %>
</div>
<div class="group column-2">
<%= label_tag('Last Name') %><span class="required">*</span>
<%= f.text_field :last_name, class: 'form-control', :tabindex => 2 %>
<%= label_tag('Country') %> <span class="required">*</span>
<%= f.collection_select :country_code, Country.order(:name), :iso_code, :name, { :include_blank => true }, { :class => 'form-control', :tabindex => 4 } %>
</div>
<div class="column-full">
<%= label_tag('Email Address') %> <span class="required">*</span>
<%= f.text_field :email_address, class: 'form-control', :tabindex => 5 %>
<%= label_tag('Confirm Email Address') %> <span class="required">*</span>
<%= f.text_field :email_address_confirmation, class: 'form-control', :tabindex => 6 %>
</div>
<div class="checkbox">
<label>
<%= check_box_tag 'chkTerms' %>
I accept the <%= link_to 'Terms & Conditions', '/pages/terms' %> <span class="required">*</span>
</label>
</div>
<div class="button-options">
<%= f.submit 'Submit', class: 'btn btn-danger' %>
<%= link_to 'Cancel', '/pages/home', class: 'link-button-cancel' %>
</div>
</fieldset>
<% end %>
Controller
def create
#person = Person.new(register_params)
#person.status = 'pending_validation'
if #person.save
render('submit')
else
render('register')
end
end
private
def register_params
params.require(:person).permit(:first_name, :last_name, :email_address, :display_name, :country_code)
end
As you can see, in my view I have a "email_address_confirmation" text_field. I created it the way I created all the other fields and they all work fine so for the life of me I can't figure out what is wrong with the code. But when I submit the page, no matter what I put in the confirmation field, the confirmation validate never fires.
In case it matters, I'm using Rails 4.2.0 and Ruby 2.1.5p273.
You need to add this in your model:
validates :email_address_confirmation, presence: true
According to Rails guides:
This (confirmation) check is performed only if email_confirmation is not nil.
Also make changes in your controller's method register_params, you miss email_address_confirmation field in permit parameters:
def register_params
params.require(:person).permit(:first_name, :last_name, :email_address, :email_address_confirmation, :display_name, :country_code)
end
Trying to make a boolean with a label left but it fails,
I could not find any complete example in the documentation online.
Currently Im using:
= f.input_field :remember_me, as: :boolean,
:input_html => { :checked => true },
:inline_label => true
= f.label "Remember me"
%br
= f.label "Remember me"
= f.input_field :remember_me, as: :boolean, :input_html => { :checked => true }, :inline_label => true
I have a Rails form created with simple_form like so:
= simple_form_for #new_biz, url: new_business_post_path, html: {:class => "customForm1", :method => "post"} do |f|
= f.input :business_name, label: false, :input_html => {:value => #wat.business_name, :readonly => true}
= f.input :wat_id, :as => :hidden, :input_html => {:value => #wat.id}
= f.input :first_name
= f.input :last_name
= f.input :email
= f.input :phone, :label => "Phone number"
= f.label "Personal Message"
= f.text_area :message, label: false
= f.submit "Submit"
And validations:
validates :first_name, presence: {:message => "Please enter the first name."}
validates :last_name, presence: {:message => "Please enter the last name."}
validates :phone, presence: {:message => "Please enter the phone number"}
validates :message, presence: {:message => "Please enter a personal message"}
All validations display as expected except for the text_area field. I can't seem to find anyone else who has had this issue. All suggestions are greatly appreciated, thanks.
shouldn't your text field input be written as:
= f.input :message, as: :text, label: false
?
I want to be able to create different sign up pages for each event in my web app.
I'm using Devise, Cancan and Rolify.
Below is my signup form at the moment:
.container
%h2
Sign up
.tab-content
.tab-pane.active{:id => "signup"}
= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-signin'}) do |f|
= f.error_notification
= f.input :email, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "Email"
- if f.object.password_required?
= f.input :password, :required => true, input_html: { class: "form-control"}, :placeholder => "Password"
= f.input :password_confirmation, :required => true, input_html: { class: "form-control"}, :placeholder => "Password Confirm"
= f.input :first_name, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "First name"
= f.input :last_name, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "Last name"
= f.button :submit, "Sign up", :class => "btn btn-lg btn-primary btn-block"
= render "devise/shared/links"
Is there a way we can add in fields from events table so those fields are populated with different urls so each one of them have dedicated signup page for visitors?
I've got an app that uses Devise and the ClientSideValidations gems.
In the form below, I've got client side validations working with devise. I think it's working since the it's now impossible to actually submit the form. My problem is that none of the text, such as "can't be blank" will appear next to the text field tags. Any idea what I'm doing wrong?
%h3 Sign up
%br
= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :validate => true) do |f|
%h4
= devise_error_messages!
%div
= f.label :name
= f.text_field :name, :validate => true
%div
= f.label :email
= f.email_field :email, :validate => { :presence => :true }
%div
= f.label :password
= f.password_field :password, :validate => { :presence => :true, :length => true }
%div
= f.label :password_confirmation
= f.password_field :password_confirmation, :validate => { :presence => true }
%div
= f.submit "Sign up", id: 'button'
= render "devise/shared/links"
When I view source, the js appears.
<script>//<![CDATA[
if(window.ClientSideValidations==undefined)window.ClientSideValidations={};if(window.ClientSideValidations.forms==undefined)window.ClientSideValidations.forms={};window.ClientSideValidations.forms['new_user'] = {"type":"ActionView::Helpers::FormBuilder","input_tag":"<div class=\"field_with_errors\"><span id=\"input_tag\" /></div>","label_tag":"<div class=\"field_with_errors\"><label id=\"label_tag\" /></div>","validators":{"user[name]":{"presence":[{"message":"can't be blank"}]},"user[email]":{"presence":[{"message":"can't be blank"}]},"user[password]":{"presence":[{"message":"can't be blank"}],"length":[{"messages":{"minimum":"is too short (minimum is 6 characters)","maximum":"is too long (maximum is 128 characters)"},"allow_blank":true,"minimum":6,"maximum":128}]}}};
//]]></script>
So I know it there and I believe it's doing its job, but for some reason, I'm just not seeing the error messages I would expect when I leave a field blank.