I want to add : (symbol) after Username, Email and Password lable tag.
so form look like this.
Username : form-field
Email : form-field
password : form-field
is there any way to add this symbol?
<div class="row">
<div class="col-form-label col-sm-1 offset-1 ">
<%= f.label :Username %>
</div>
<div class="col-sm-8">
<%= f.text_field :username, class: "form-control", placeholder: "Enter username", autofocus: true %>
</div>
</div>
<div class="row">
<div class="col-form-label col-sm-1 offset-1">
<%= f.label :Email %>
</div>
<div class="col-sm-8">
<%= f.email_field :email, class: "form-control", placeholder: "Enter email" %>
</div>
</div>
<div class="row">
<div class="col-form-label col-sm-1 offset-1">
<%= f.label :password %>
</div>
<div class="col-sm-8">
<%= f.password_field :email, class: "form-control", placeholder: "Enter password" %>
</div>
</div>
when I am adding : (symbol) after Username,Email,Password it gives SyntaxErrorInTemplate.
This answer should help.
Custom text for label
But for your specific issue, you can do:
<%= f.label :username, 'Username:' %>
...
<%= f.label :email, 'Email:' %>
Related
I have a application controller like this :
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:first_name, :last_name, :description, :city_id, :golf_level])
end
end
and a form sign up with device like this :
<h2 class='container'>Inscription</h2>
<div class="tab-pane show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
<div class="component-example">
<div class='container'>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class='row'>
<div class="col-md-6">
<%= render "devise/shared/error_messages", resource: resource %>
<div class='field form-group'>
<%= f.label 'Prénom' %><br>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Nom' %><br>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Niveau' %>
<%= select_tag(:golf_level, options_for_select([['débutant', 'débutant'], ['intermediaire', 'intermediaire'], ['confirmer', 'confirmer']])) %>
</div>
</div>
<div class="col-md-6">
<div class="field form-group">
<%= f.label 'Mot de passe' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label 'Confirmer mot de passe' %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Ville' %>
<%= select_tag(:city_id, options_for_select( City.all.collect { |city| [city.name, city.id] }, {target_blank: true} )) %>
</div>
<div class='field form-group'>
<%= f.label 'Description'%>
<%= f.text_area :description, size: "60x5", class: 'form-control'%>
</div>
</div>
<div class="actions">
<%= f.submit "Inscription", class: 'btn btn-primary' %>
</div>
<% end %>
<button class='btn btn-primary' style="margin-left:20px;"><%= render "devise/shared/links" %></button>
</div>
</div>
</div>
</div>
My problem is maybe stupid but : When i create a User with this form the selects tags golf_level and city_id are not save in db but all other yes. In device doc I don't find special way for select form.
Ok, your parameters are passed, but not within proper namespace. Instead of select_tag you should use f.select method:
<%= f.select(:city_id, options_for_select(City.pluck(:name, :id), target_blank: true )) %>
And likewise for the second of your params.
I'm building out a form on a Rails app and for one of the sections I'm getting some random text in the text field (School Group) and I'm not sure why -
This is the code for the form, am I using the wrong type of field?
<% provide :title, "Add Staff Member" %>
<%= form_for #user do |f| %>
<div class="form-group row">
<%= f.label :firstname, 'First Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :firstname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :nickname, 'Nickname', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :nickname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :surname, 'Last Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :surname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Email Address', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.email_field :email, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Send Welcome Email?', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= check_box_tag :send_welcome_email %>
</div>
</div>
<div class="form-group row">
<%= f.label :user_groups, 'School Group', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :user_groups, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :timezone, 'Timezone', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.time_zone_select(:timezone, nil, {default: #user.timezone}, {class: 'form-control custom-select'}) %>
</div>
</div>
<hr>
<h2>Create Password</h2>
<p><small>Password must be at least six characters long</small></p>
<div class="form-group row">
<%= f.label :password, 'New Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :password_confirmation, 'Confirm Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="actions">
<%= f.submit 'Submit', class: 'btn btn-primary' %>
</div>
<% end %>
The field for school groups can actually be left blank for the benefit of this form but I want the field there. How do I get rid of this text?
it's not some random text it might be a association in your User or #user probably column name is named same as the association name or may be a typeo.
In my edit view, I want to apply bootstrap. However, when replacing...
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4"><%= f.label :username %></div>
<div class="col-md-8"><%= f.text_field :username %></div>
</div>
with this...
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<input type="text" class="form-control" name="username" placeholder="Username" value="<%= f.text_field :username %>">
</div>
</div>
</div>
I get this as output
I have tried many alternatives to include erb but don't understand the issue. How should I include the field in my edit forms?
you can do all the things with rails.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>
For more detail Please visit this link
http://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
If you want to use add-on you can as below
<div class='input-group' >
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
Try this instead
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>
I would suggest using a gem called simple_form, it's made by the creators of Devise and works nicely with Bootstrap. It also has nice validation errors.
https://github.com/plataformatec/simple_form
Here's an example:
= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
.form-inputs
= f.input :email, required: false, autofocus: true, placeholder: 'Email'
= f.input :password, required: false, placeholder: 'Password'
= f.input :remember_me, as: :boolean, label: 'Remember Me' if devise_mapping.rememberable?
.form-actions
= f.button :submit, 'Sign in', class: 'btn-block btn-success'
%br
= link_to 'Forgot your password?', new_user_password_path
The code above will automatically add any bootstrap classes and labels...etc
So I implemented Materialize css with my Rails app. I already had Bootstrap installed.
Basically I want to have Materialize form components within the app. I have struggles figuring out how to actually create a materialize form in Rails that submits details from the form. I see that components are showing.
How can I implement materialize form components within this form?
In my Devise, edit form, the form looks like this:
<div class="panel-body">
<%= form_for resource, as: resource_name, url: registration_path(resource_name), layout: :horizontal do |f| %>
<!-- = devise_error_messages!
-->
<div><%= f.label :first_name %><br />
<%= f.text_field :first_name, autofocus: true %></div>
<div><%= f.label :last_name %><br />
<%= f.text_field :last_name, autofocus: true %></div>
<div><%= f.label :gender %><br />
<%= f.text_field :gender, autofocus: true %></div>
<div><%= f.label :age_range %><br />
<%= f.text_field :age_range, autofocus: true %></div>
<%= f.email_field :email, autofocus: true %>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<p>
Currently waiting confirmation for:
<%= resource.unconfirmed_email %>
</p>
<% end %>
<%= f.password_field :current_password %>
<%= f.password_field :password, autocomplete: "off" %>
<%= f.password_field :password_confirmation, autocomplete: "off" %>
<%= f.submit "Update" %>
<% end %>
</div>
</div>
You can use MaterilizeCSS Input field classes for your input fields like this.
<div class="input-field col s6">
<%= f.label :first_name %><br />
<%= f.text_field :first_name, autofocus: true %>
</div>
<div class="input-field col s6">
<%= f.label :last_name %><br />
<%= f.text_field :last_name, autofocus: true %>
</div>
Like this you can achieve MaterializeCSS style.
Materialize-CSS Component forms are text inputs, more specifically input fields from the docs:
https://materializecss.com/text-inputs.html
Example implementation:
<div class="container">
<div class="row center sign-up-form">
<div class="col s12 m12 l12">
<div class="card-panel">
<h3 class="header">Sign up!</h3>
<div class="row">
<%= form_for(#student, html: {class: "col s12"}) do |f| %>
<div class="row">
<div class="input-field col s12">
<%= f.text_field :name, placeholder: "Enter your full name", autofocus: true %>
<%= f.label :name %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :email, placeholder: "Enter your email address" %>
<%= f.label :email %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.submit "Submit", class: "btn orange waves-effect waves-light right" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
Add this to your gemfile
gem 'materialize-form'
and follow these instructions.
I am using devise in my rails app, I converted the devise views to use simple form. When I attempt to sign up with an incorrect password format the flash messages for the password do not appear. Flash messages appear for ever other field. Does anyone know how to fix this problem.
<div class="container">
<div class="panel small-5 small-centered columns">
<div class="row">
<h2>Sign Up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => {:multipart => true}) do |f| %>
<%= f.input :email, label: "E-mail", :autofocus => true %>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.label :password, label: "Password" %>
<%= f.password_field :password %>
</div>
<div class="small-6 columns">
<%= f.label :password_confirmation %>
<div id="password-confirm">
<%= f.password_field :password_confirmation %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.input :last_name, label: "First Name" %>
</div>
<div class="small-6 columns">
<%= f.input :first_name, label: "Last Name" %>
</div>
</div>
</div>
<div class="row">
<div class="sign-up">
<%= f.label "Profile Photo" %><br>
<%= f.file_field :avatar, label: "Profile Photo" %>
<%= f.input :twitter_handle, label: "Twitter Url" %>
<%= f.input :linked_in_url, label: "Linked In Url" %>
<%= f.input :about_me, label: "About You (500 character max)" %>
<%= f.submit "Sign up", class: "button" %>
<% end %>
</div>
</div>
</div>
</div>