Rails 5.1 - text appearing on form field - ruby-on-rails

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.

Related

How to add symbol (:) in .erb file in rails

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:' %>

How to save additional informations from Devise form?

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.

How to materialize form in Rails?

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.

Html5 - W3C validation errors - Rails(Embedded Ruby)

Kindly guide me to solve these errors in sign up and login views
<div class="jumbotronsignup">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 labelcolor">
<h3>SIGN UP</h3>
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :name %>
<%= f.text_field :name, autofocus: true , class: 'form-control' %>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
<%= f.label :password_confirmation, "Password Confirmation" %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
<div>
<%= f.label :is_female, "Gender" %>
<%= f.select :is_female, User::GENDER_TYPES , {}, { :class => 'form-control' } %>
</div>
<div>
<%= f.label :date_of_birth, :class=>'singleline' %>
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select datetest' %>
</div>
<div>
<%= f.label :avatar , "Profile Picture" %>
<%= f.file_field :avatar, accept: 'image/jpeg,image/gif,image/png,image/tiff', class: 'form-control' %>
</div>
<div class="row text-center">
<%= f.submit "Create my account", class: "btn mybtn-primary btn-lg" %>
</div>
<% end %>
</div>
</div>
</div><!-- end of container -->
</div><!-- end of jumbotron -->
How can I solve this error?
And this is my login page
<div class="jumbotronsignup">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 labelcolor">
<h3>LOG IN</h3>
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= link_to "(forgot password)", new_password_reset_path %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :remember_me, class: "checkbox inline" do %>
<%= f.check_box :remember_me %>
<span>Remember me on this computer</span>
<% end %>
<div class="row text-center">
<%= f.submit "Log in", class: "btn mybtn-primary btn-lg" %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
<% end %>
</div>
</div>
</div><!-- end of container -->
</div><!-- end of jumbotron -->

Using Devise and Simple form

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>

Resources