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.
Related
I'm trying to add Mapbox autofill to my address bar on rails, for mapbox autofill to work I need to have autocomplete="street-address in an input field.
I'm using simple_form_form and I can't figure out how to add autocomplete attribute. Here is my form:
<%= simple_form_for #lock do |f| %>
<div class="form_wrapper">
<div class="form_div">
<%= f.input :name %>
<%= f.input :description %>
<mapbox-address-autofill>
<%= f.input :address, :autocomplete => "street-address" %>
</mapbox-address-autofill>
<%= f.input :photo, as: :file, label: "Link to picture" %>
<%= f.input :special_content %>
<%= f.button :submit, :class => "btn btn-primary" %>
<% end %>
any ideas on how to make the autocomplete attribute work?
Use input_html and pass the additional options like class etc.
<%= f.input :address, input_html: { :autocomplete => "street-address"} %>
I'm using Simple_form with Rails 5 and bootstrap 4. I'm having an issue where i've set my datatype to be :text
My bootstrap form brings in the class text as it should however this is making my form hide somewhere beneath something on the page. When I remove the text class and add a class of string it appears in the view.
whats the best option here? Just try to change the text class to be string class?
or try amend the text class simple form is calling to something else text_new class or something so it doesn't conflict with something somewhere else?
here's the code I'm getting and result i'd like. I've tried adding
html: { class: "string"}
but this does nothing for me.
I essentially need the three instances of class "text" changed to "string" or better yet have it removed or changed to different name in a default setting please.
<div class="form-group text required testimonial_quote">
<label class="control-label text required" for="testimonial_quote">
<abbr title="required">*</abbr> Quote</label>
<textarea class="form-control text required" name="testimonial[quote]" id="testimonial_quote"></textarea></div>
My Simple form code
<%= simple_form_for(#testimonial) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name %>
<%= f.input :quote %>
<%= f.input :received %>
<%= f.association :course, label_method: :header %>
<%= f.input :featured %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
Without you posting your existing simple_form code I can't give you the exact answer. That said I think the line you are looking for is:
<%= input_html: { class: 'string' } %>
Example from the simple_form docs:
<%= simple_form_for #user do |f| %>
<%= f.input :username, input_html: { class: 'special' } %>
<%= f.input :password, input_html: { maxlength: 20 } %>
<%= f.input :remember_me, input_html: { value: '1' } %>
<%= f.button :submit %>
<% end %>
Please try as below
html: {...} for form tag
input_html: {...} for input tag.
class: "..." for submit tag
For example:
<%= simple_form_for #product, html: { class: "ex-product-form" } do |f| %>
<%= f.input :name, input_html: { class: 'p-name' } %>
<%= f.button :submit, class: "btn btn-default" %>
<% end %>
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 a page which has a login form, as well as a form to register. Here is the code:
<h3>Log In</h2>
<%= form_for Spree::User.new, :as => :spree_user, :url => spree.spree_user_session_path do |f| %>
<%= devise_error_messages! %>
<%= f.email_field :email, placeholder: "Email" %>
<%= f.password_field :password, placeholder: "Password" %>
<div><%= f.submit "Log In", class: "registrationbuttons" %></div>
<% end %>
<h3>Register Now</h2>
<%= form_for Spree::User.new, :as => :spree_user, :url => spree.spree_user_registration_path do |f| %>
<%= f.email_field :email, placeholder: "Email" %>
<%= f.password_field :password, placeholder: "Password" %>
<%= f.password_field :password_confirmation, placeholder: "Confirm Password" %>
<div><%= f.submit "Register", class: "registrationbuttons" %></div>
<% end %>
If a user uses the Log In form, and is asked if they want their browser to remember the password - If they select yes the next time they see this page, fields in the Register Now form (which they may have never user) populate.
How can I ensure only the correct fields get saved?
I found the solution here: http://benjaminjshore.info/2014/05/chrome-auto-fill-honey-pot-hack.html
I added this line:
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
To my 2nd form_for (the fields which were being incorrectly remembered). It now looks like this:
<%= form_for Spree::User.new, :as => :spree_user, :url => spree.spree_user_registration_path do |f| %>
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<%= f.email_field :email, placeholder: "Email" %><br>
<%= f.password_field :password, placeholder: "Password" %><br>
<%= f.password_field :password_confirmation, placeholder: "Confirm Password" %><br>
<div><%= f.submit "Register", class: "registrationbuttons" %></div>
<% end %>
Now the field is not remembered.
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