I am quite new to the simple form gem and I'd like to customize the inputs with SVG add-ons such as an email picture into the input field "Email"
Here is the svg code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" width="24" height="24"><title>email 84</title><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="#111111" stroke="#111111"><polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="1,3 12,13 23,3 " stroke-linecap="butt"/> <rect x="1" y="3" fill="none" stroke="#111111" stroke-miterlimit="10" width="22" height="18"/></g></svg>
And here is my simple form code:
<div class="col-xs-12 col-sm-4 col-sm-offset-4">
<div class="form-login">
<p>Welcome !!</p>
<div class="hr">
</div>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, required: true, autofocus: true, placeholder: "First name" %>
<%= f.input :last_name, required: true, autofocus: true, placeholder: "Last name" %>
<%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<%= f.input :password, required: true, hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length), placeholder: "Password" %>
<%= f.input :password_confirmation, required: true, placeholder: "Password" %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-danger small-btn width-login" %>
</div>
<% end %>
</div>
</div>
Where should I put the SVG code?
Thanks !!
You can put before input tag and into a label tag
<%= f.label(:email) do %>
# Here is the SVG
#Edit
<%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<% end %>
Edit:
And you should use css like in How to add a SVG icon within an input?
Related
Rails 6.0.3
I am using a form to schedule meetings.
It is being used for both single time meetings that span over several days (with start_time and end_time) and tasks that last only one day.
For singular day meetings, I need the end_time to be set to the same value as start_time, without user selecting it.
I have tried many things in the controller, but can't work it out.
How would you go about this.
Thanks for the help
<div class="border border-grey-light rounded" style ="padding: 10px;">
<%= form_with(model: meeting, local: true, :html => {:id => "flatpickr-form-single"} ) do |form| %>
<div class="mb-6">
<%= form.label :name, class: 'label' %>
<%= form.text_field :name, required: true, class: 'form-control', placeholder: "Task name" %>
</div>
<div class="mb-6">
<%= form.label :body %>
<%= form.rich_text_area :body, class: 'form-control' %>
</div>
<div class="start_time_result mb-6" style ="width: 30vw;">
<%= form.label :start_time, class: 'label' %>
<div class="flex items-center justify-between max-w-md">
<%= form.text_field :start_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control" %>
</div>
</div>
<div class=" field" style ="width: 30vw;">
<%= form.label :end_time, class: 'label' %>
<div class="end_time_result flex items-center justify-between max-w-md" >
<%= form.text_field :end_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control required" %>
</div>
</div>
<%= form.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Confirm" %>
<% end %>
</div>
<script>
const selectElement = document.querySelector('.start_time_result');
selectElement.addEventListener('change', (event) => {
const end_time_result = document.querySelector('.end_time_result');
end_time_result.textContent = `${event.target.value}`;
});
</script>
You can add a before_action in the controller and set the end_time parameter value to the same as the start_time from there.
I have tried to put a div block, with class="col-md-6 col-md-offset-3", around my devise simple_form expecting that this would take 1/3 of my screen width and would be centralized (offset). It did not worked. Why ?
<div class="col-md-6 col-md-offset-3">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email,
required: true,
autofocus: true ,
input_html: { autocomplete: "email" }%>
<%= f.input :password,
required: true,
hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length),
input_html: { autocomplete: "new-password" } %>
<%= f.input :password_confirmation,
required: true,
input_html: { autocomplete: "new-password" } %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
</div>
The class is offset-md-3 not col-md-offset-3
<div class="row">
<div class="col-md-6 offset-md-3">
...
</div>
</div>
Still not find a solution..I want that the filed fullname is automatically updated when I fill fields prénom and nom.
these fields are used in the sign_up registration from devise. (I 've done changes in devise controller to be able to use nom and prenom as fields.
I've done this code but seems that my function do nothing and fullname field stays empty.
I don't want to transform my code to html (I d like to use <% %> in my code...
<div class= "col-md-4 col-md-offset-4">
<h2 class="text-center"> Sign up</h2>
<br/>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
< <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('user.prenom, user.nom').on('user', function(e) {
var changedFullName = $('user.prenom').val() + " " + $('user.nom').val()
$('user.fullname').val(changedFullName);
});
});
</script>
<div class="form-group">
<%= f.label :prenom %><br />
<%= f.text_field :prenom, autofocus: true, placeholder: "Prenom", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :nom %><br />
<%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :fullname %><br />
<%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control", :readonly => true %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
thanks for your help
You should be using classes or ids to assign a jquery event. Here's my solution, based on your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "col-md-4 col-md-offset-4">
<h2 class="text-center"> Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :prenom %><br />
<%= f.text_field :prenom, autofocus: true, placeholder: "Prenom", class: "form-control prenom" %>
</div>
<div class="form-group">
<%= f.label :nom %><br />
<%= f.text_field :nom, autofocus: true, placeholder: "Nom", class: "form-control nom" %>
</div>
<div class="form-group">
<%= f.label :fullname %><br />
<%= f.text_field :fullname, autofocus: false, placeholder: "Nom complet", class: "form-control fullname", :readonly => true %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Password", class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('.prenom, .nom').on('change', function(e) {
var changedFullName = $('.prenom').val() + " " + $('.nom').val();
$('.fullname').val(changedFullName);
});
});
</script>
Basically, I gave classes to your :nom, :prenom and :fullname fields and updated your jQuery, so it will work.
When I create a new user with an existing username I get this error:
UNIQUE constraint failed: users.username
I do get an error message for everything else (already used email, uncorresponding passwords).
How can I make it return an error that shows up on the page, just like the others, instead of a crashing error.
I have all the default devise setting haven't changed a thing.
Thank you for the help.
EDITED:
This is the page where I create my user:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class: "form-horizontal form-user form1"}) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :username, class: "control-label mr" %><br>
<%= f.text_field :username, class: "text-field form-control", html: {spellcheck: "false"} %>
</div>
<div class="form-group">
<%= f.label :email, class: "control-label mr" %>
<%= f.email_field :email, class: "text-field form-control", html: {spellcheck: "false"} %>
</div>
<div class="form-group">
<%= f.label :password, class: "control-label ml" %>
<%= f.password_field :password, class: "text-field form-control", html: {autocomplete: "off"} %>
</div>
<div class="form-group">
<%= f.label :password_confirmation, "Confirm Password", class: "control-label ml" %>
<%= f.password_field :password_confirmation, class: "text-field form-control", html: {autocomplete: "off"} %>
</div>
<div class="form-group">
<div class="center">
<br><%= f.submit "Next", class: " btn btn-primary" %>
</div>
</div>
<% end %>
I am using simple_form with rails 4. The form seems to work properly, except i cannot click on any of the input fields. When i try to click on them, nothing happens, and I can't enter text. Here is the code:
<%= simple_form_for #mimic, url: create_employer_account_path, html: {id: 'braintree-payment-form'}, method: :post, remote: true do |f| %>
<div class="forms clearfix" style="margin-left: auto; margin-right: auto; width: 35%;">
<h1>Personal / Business Information</h1>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :first_name, input_html: {class: 'field', style: 'width: 300px;', id: 'first_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :last_name, input_html: {class: 'field', style: 'width: 300px;', id: 'last_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :company, input_html: {class: 'field', style: 'width: 300px;', id: 'company'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :email, input_html: {class: 'field', style: 'width: 300px;', id: 'email'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :phone, input_html: {class: 'field', style: 'width: 300px;', id: 'phone'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :fax, input_html: {class: 'field', style: 'width: 300px;', id: 'fax'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :website, input_html: {class: 'field', style: 'width: 300px;', id: 'website'} %>
</p>
</div>
<p class="buttons action-buttons text-center">
<%= f.submit "SUBMIT", class: 'submit-button button button-save button-submit'%>
</p>
<% end %>