I have Rails Devise Bootstrap and Simple Form.
My devise registration/sign-up form is in a bootstrap modal. It is a simple form.
When I click on the register link (from my navbar) on my root url, the form works fine. When I navigate to another page and click that link, the simple form fields are blank. The form boxes are there to fill in, but the text above them that describe the field, are missing.
Any ideas? Thank you
This is my form:
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs" style="padding-left:15%; text-align:left;">
<%= f.input :first_name, required: true, autofocus: true %>
<%= f.input :last_name, required: true, autofocus: true %>
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true %>
<%= f.input :password_confirmation, required: true %>
</div>
<div class="form-actions" style="padding-left:15%; padding-top:5%; text-align:left;">
<%= f.button :submit, "Register" %><% end %>
</div>
You should add above each "f.input .." field a "f.label :insert_field_name_here", and it should work.
Really strange, but that text was formatted white in the sub pages. Not sure why, but mystery solved.
Related
I have the following simple_form in my rails app:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title center">Add New Customer</h3>
</div>
<div class="panel-body">
<%= simple_form_for(#customer, html: {class:'form-horizontal'}, wrapper: :horizontal_form) do |f| %>
<%= f.input :first_name, input_html: {class:'form-control'} %>
<%= f.input :last_name, input_html: {class:'form-control'} %>
<%= f.input :phone_number, as: :tel, input_html: {class:'form-control'} %>
<%= f.input :email_address, as: :email, input_html: {class:'form-control'} %>
<%= f.input :address, input_html: {class:'form-control'} %>
<%= f.input :city, input_html: {class:'form-control'} %>
<%= f.input :postal_code, input_html: {class:'form-control'} %>
<%= f.input :customer_type, collection: ["Retail", "Contractor", "Dealer"], input_html: {class:'form-control'}, prompt: "Select Customer Type" %>
<br />
<%= f.button :submit, "Create Customer", class: "col-md-3 bump-right" %>
<% end %>
</div>
</div>
As you can see, I'm using bootstrap styling on the form elements. When I submit the form, I want the following to happen:
Validate email
Validate phone number
Require all fields
As it stands now, when I submit the form, none of the above three happen. Looking through the docs for simple_form (https://github.com/plataformatec/simple_form) I can't discern what I need to do to achieve my end result. I have tried adding f.error fields for each input but that does not seem to do anything.
There is this 2 year old question: simple_form & bootstrap validations not working - but this is foreign to me and given the 2.5 year old versions I'm sure something has changed.
If anyone has any ideas, or can help me demystify the docs I would be grateful.
Use validations in the models (specifically the customer model) which would happen before the data is saved to the database. See the docs here.
Example:
class Person < ActiveRecord::Base
validates :name, presence: true
end
Person.create(name: "John Doe").valid? # => true
Person.create(name: nil).valid? # => false
I have an input form and I would like to set the keyboard focus when the page loads. I am using Rails with Bootstrap and I have formtastic_bootstrap for the forms. Here is a simplified example:
<%= semantic_form_for item, url:url_for_event(:create) do |f| %>
<%= f.input :title, label: t('.title') %>
<%= f.input :description, label: t('.description') %>
<%= f.submit t('.create'), class: 'btn btn-primary pull-right' %>
<% end %>
I would like to focus the "title" field so that the cursor is in that field and the Bootstrap blue highlight appears when the page loads so that the user can just start typing into that field.
I have tried setting "autofocus" on the field like this
<%= f.input :title, label: t('.title'), input_html: { autofocus: true } %>
I have tried with jquery
<%= javascript_tag "$('item_title').focus()" %>
I have tried with Javascript
<script type="text/javascript">
document.getElementById("item_title").focus();
</script>
Nothing works. I am testing with a Firefox 28 browser. I have seen many examples that suggest those ways should work. There is nothing else in play here - this is a basic form rendered by a controller action. It isn't using Bootstrap modals.
I have checked that input_title is the field's id by using Javascript to set its value - that works.
Any suggestions much appreciated.
Try this
<%= f.input :title, label: t('.title'), input_html: {:autofocus => true} %>
Just add class to your div
<%= f.input :title, label: t('.title'), class: "form-control" %>
On this edit page screen I've set up a "Current Password" field required to edit the user information (to change my name for example) but for some reason that particular current password field is not showing up while all the other input fields do.
I can't figure out why its not showing up?
Thank you!
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { :method => :put, class: 'form-horizontal'}) do |f| %>
<%= f.error_notification %>
<%= f.input :name, :label => "Nombre" %>
<%= f.input :email, :label => "Correo Electronico" %>
<%= f.input :password, :label => "Nueva Contraseña", autocomplete: "off" %>
**<%= f.input :password_confirmation, :label => 'Confirmar Contraseña', autocomplete: "off" %>**
<% f.input :current_password, :label => "Contraseña Actual" %>
</br>
<div class= "form-actions">
<%= f.submit "Actualizar Datos", class: "btn btn-primary"%>
</div>
<% end %>
You forgot to add the = in the ERB tab. It won't echo to the page without that. It should look like this:
<%= f.input :current_password, :label => "Contraseña Actual" %>
Keep in mind, statements whose values you do not want to show on the page should omit the equals (=) sign. Examples of those statements would be things like <% if ... %>, <% #some_var.each do .... %> etc.
Values you do wish to appear on the page, such as your input line, should have the equals sign.
I want to check existence of "Name", "Email" input field, but I can't find the method(or function) in parsleyjs.org...
This is my simple-form and parsley code:
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render 'devise/shared/error_messages', object: f.object %>
<div class="form-inputs">
<%= f.input :name, required: true, autofocus: true%>
<%= f.input :email, required: true %>
<%= f.input :password, required: true, placeholder: "min. 6 characters",
input_html: {"parsley-minlength" => 6, "error-container" =>"#errorBlock"} %>
<%= f.input :password_confirmation, required: true,
input_html: {"parsley-equalto" => "#user_password"} %>
<%= f.collection_select :role, User::ROLES, :to_s, :humanize %>
</div>
<div class="form-actions">
<%= f.button :submit, "회원 가입" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
<script>
$("#new_user").parsley({trigger: "keyup",
errors: {
errorsWrapper: '<div></div>',
errorTemplate: '<span></span>'
}
});
</script>
If I understand correctly your question looking at the comments, it seems that you want to leverage Parsley validation to check in your database if email or name is already taken and display a Parsley error accordingly.
To achieve that, you'll need to use Parsley Remote plugin, and its documentation here: http://parsleyjs.org/doc/index.html#remote
You'll need to work on your APIs to be able to check backend if these fields values already exist in database, and than integrate parsley.remote.js on top of that.
Best
I have the following HTML input field:
<input type="text" class="login-field" value="" placeholder="Enter your name" id="login-name" />
<label class="login-field-icon fui-user" for="login-name"></label>
I want to translate it into my simple_form field so it will have the same properties like classes, id's etc.
<%= f.input :email%>
Is there a way to add HTML properties inside the simple_form field?
Extracted from simple_form documentation on Github:
<%= simple_form_for #user do |f| %>
<%= f.input :username, label: 'Your username please' %>
<%= f.input :password, hint: 'No special characters.' %>
<%= f.input :email, placeholder: 'user#domain.com' %>
<%= f.input :remember_me, inline_label: 'Yes, remember me' %>
<%= f.button :submit %>
<% end %>
By default it contains labels.
Also, specific options in input call will overwrite the defaults:
<%= f.input :username, input_html: { class: 'special' } %>
Have a look at their Github page, everything is there.