my login page( build with simple form) add by default html attributes for browser validation on email input that chrome doesn't recognize and show "Please match the requested format."
Maybe is Chrome bug(on firefox works), so have tried to disable browser validation with simple form config
SimpleForm.html5 and SimpleForm.browser_validations(false by default), restarted rails but remain the same input:
<input autofocus="autofocus" class="string email optional form-control
input-xlarge" id="customer_email" maxlength="255"
name="customer[email]" pattern="\A[^#\s]+#([^#\s]+\.)+[^#\s]+\z"
size="255" type="email">
have tried also to add on form html: {novalidate: true}, same output
finally have tried to add on input_filed :novalidate => true, the html output change to:
<input autofocus="autofocus" class="string email optional form-control
input-xlarge" id="customer_email" maxlength="255"
name="customer[email]" pattern="\A[^#\s]+#([^#\s]+\.)+[^#\s]+\z"
size="255" type="email" novalidate="novalidate">
but browser validation and chrome error is present.
Any idea to resolve?
PS: Use Bootstrap and the login form is from Devise resource.
You can remove the pattern attribute from the input element that is causing a problem. You just need to set pattern: false on the input field.
So your input field might look something like this:
<%= f.input_field :email, type: 'email', required: true, autofocus: true, class: 'form-control', pattern: false %>
(nil doesn't work; it has to be false.)
This worked for me in Rails 4.
Related
I have a form and need to add a GDPR checkbox.
If the checkbox is clicked (= checked), the checkbox's value should be true (or 1). If not, then the value should be false (or likely nil).
This is how I render the checkbox:
= f.input :gdpr, as: :boolean, required: true, label: false, checked_value: true, unchecked_value: false, input_html: { }
However, when I look at the generated HTML, I see that (probably) by default the checkbox's value is 1 - how is that possible?
EDIT: This is the rendered HTML:
<input name="obj[gdpr]" type="hidden" value="open">
<input required="required" aria-required="true" type="checkbox" value="true" name="obj[gdpr]" id="obj_gdpr">
How do replaced that 1 with nil?
Thank you in advance.
value attribute is not the default value of the checkbox. This attribute is submitted as input's value to the server if checkbox is checked.
E.g.
<label>Completed?</label>
<input type="checkbox" value="completed" name="status"
This will be submitted as status=completed.
To check if checkbox is checked use checked attribute of DOM node in JS.
Also see MDN explanation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
This is a checkbox which has required attribute true
This form belongs to form component made using simple form
= form.input :terms, label: "hello", as: :boolean, required: true
But when this is converted into HTML (rendered by RAILS), we get this result
<input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="sample_name" id="sample_id">
The above code contains an extra attribute called aria-required which comes with require attribute from HAML file.
It is said that simple form automatically adds the this aria-required attribute.
How to remove the aria-required attribute from the form without removing required attribute?
I want to test presence of disabled field generated in rails(5) view helper
form_for(#metric) do |f|
f.text_field :type, disabled: true
end
it creates HTML
<input id="metric_type" type="text" name="metric[type]" value="Gamfora::Metric::Point" disabled="disabled">
It should be probably just
<input id="metric_type" type="text" name="metric[type]" value="Gamfora::Metric::Point" disabled>
but it is OK and do the job.
In Firebug I verify that CSS selector is input#metric_type:disabled.
But when I use it in controller(+view) tests
assert_select "input#metric_type:disabled"
I get error
RuntimeError: xmlXPathCompOpEval: function disabled not found
Is there any way, how to test that input selected by ID is disabled?
One solution is
assert_select ".field input#metric_type" do |input|
assert input.attr("disabled").present?
end
I'm using a rails form with client side validations. How can I customize the error message, which current says:
"Value must be equal to or greater than ... "
Here is the form field:
<%= f.number_field :age, placeholder:"Age", class:"form-control", required: true, max:90, min:17, message: 'foo' %>
HTML5 API has a way to set custom error validation message. Look below the example:
Example:
<form>
<label for="mail">I would like you to provide me an e-mail</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>
And then adding a JS:
var email = document.getElementById("mail");
email.addEventListener("keyup", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, darling!");
} else {
email.setCustomValidity("");
}
});
Documentation of setCustomValidity().
I have a search form which I return to after searching, to be able to refine the search. I just added a checkbox to that form.
In the view:
<%= f.input :available_tomorrow, as: :boolean, label: false,
inline_label: t('public.search.form.available_tomorrow.label'),
input_html: { name: :available_tomorrow, value: params[:available_tomorrow],
id: :available_tomorrow } %>
In the model:
attr_reader :available_tomorrow
HTLM produced:
<div class="form-group boolean optional search_available_tomorrow">
<input name="available_tomorrow" type="hidden" value="0">
<label class="checkbox">
<input class="boolean optional" id="available_tomorrow" name="available_tomorrow" type="checkbox" value="1">
Available tomorrow
</label>
</div>
When I check the box, all search parameters appear fine in the url querystring but that one:
&available_tomorrow=0&available_tomorrow=1
Looks like the value property of both field is sent, and neither changes. If I uncheck the box, I only get &available_tomorrow=0 in the querystring. The second part is only added if the checkbox is checked.
Everything works as intended (the search does return the right results depending on the checkbox state, the checkbox is in the right state when the search form is updated). But that querystring is ugly with both available_tomorrow parameters, looks like the first one should never appear. Ideas?
This is normal behavior for a form with a checkbox when you POST the form: If the checkbox is not checked, only the hidden field with value 0 is sent with the formdata. If the checkbox is checked, the input with the value 1 is also sent.
The hidden field for the checkbox is always sent, this is because otherwise no value for the checkbox would be sent.
Long story short: don't mind the querystring in your search url, nobody will ever look at them. :)