In Magento CE2.4.5 I have added a custom validation to the STREET field. It needs to be validated if the field contains both text and a number as many customers forget to submit their house number:
'validate-housenumber': [
function (value) {
return utils.isEmptyNoTrim(value) || /^[A-Za-z]+[ ]+[0-9]/.test(value);
},
$.mage.__('Please enter a house number')
],
For testing reasons I have added this code in:
Magento/Ui/view/base/web/js/lib/validation/rules.js
And added the validation rule in:
checkout_index_index.xml
<item name="validation" xsi:type="array">
<item name="validate-housenumber" xsi:type="string">true</item>
</item>
However, the validation happens immediately when starting to type anything in the field. I would need either one of these solutions:
(a) Validation message appears after leaving the field (desired)
(b) Validation message appears after clicking the button to the next checkout step (just like it happens with required fields not being filled out)
Any hint would be very welcome. Thank you for your help!
Alex
Finally I found a solution in another Thread. Thanks to Tailtiu:
https://magento.stackexchange.com/questions/278554/trigger-checkout-validation-only-on-change-event
With this solution validation works as expected. However, for testing reasons I applied the validation to company field instead of street field:
<item name="company" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-housenumber" xsi:type="string">true</item
</item>
<item name="config" xsi:type="array">
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/inputhousenumbercheck</item></item>
</item>
This works fine. But when applying it to the field street.0 instead of company field there is a problem: in frontend the street field cannot be accessed any more.
Update:
As I learnt the street field cannot be accessed via xml. Instead it had to be done via plugin for:
Magento\Checkout\Block\Checkout\LayoutProcessor
Related
I am using the latest version of mui. I have a user contact info form that contains a zip code field. I do not want this field to be auto completed if the value is null, but it keeps getting auto completed with the email saved in my browser. Here is what I have tried so far:
autoComplete="off"
autocomplete="off"
autoComplete="nope"
And here is the code of my text field:
<Textfield
name="zipCode"
id="zipCode"
label="Zipcode *"
autoComplete='nope'
value={addressDetails.zipCode || ""}
onChange={updateAddressDetails}
error={displayError(validationErrors?.zipCode)}
helperText={validationErrors?.zipCode}
fullWidth
/>
Below is the screenshot of my form:
Although, autoComplete='nope' is working for other fields like city but not for zipCode.
As mui docs says:
By default, the component disables the input autocomplete feature
(remembering what the user has typed for a given field in a previous
session) with the autoComplete="off" attribute.
So code would look like this:
<TextField
{...params}
inputProps={{
...params.inputProps,
autoComplete: 'off',
}}
/>
I suspect the problem with your ZIP code field is that autocomplete is autoComplete?: string | undefined; so it might not work with numbers.
edit: I see it gets autocompleted with your email.
Try adding this:
<Textfield
name="zipCode"
id="zipCode"
label="Zipcode *"
inputProps={{ autoComplete: 'off' }}
value={addressDetails.zipCode || ""}
onChange={updateAddressDetails}
error={displayError(validationErrors?.zipCode)}
helperText={validationErrors?.zipCode}
fullWidth
/>
Error got resolved!
I figured out the reason for getting this error, that was a different use case. I have an update password form next to the contact info form and that update password form has three fields:
Current password
New password
Confirm password
So, what was happening is that the current password field got auto-filled with a password saved in the browser because the type of that field is 'password' and the zip code field was just above this current password field so it got filled with the email of the saved password.
What I needed to do was to turn off the autocomplete for the password field so that the autocomplete of the zip code field with an email address would stop too. I tried the following options to stop password autocomplete but didn't work:
- autoComplete="nope"
- autoComplete="off"
- inputProps = {{
autoComplete: "off"
}}
- inputProps = {{
autoComplete: "nope"
}}
what actually worked is:
inputProps={{
autoComplete: 'new-password'
}}
By doing this, my zip code field's auto-completing with email address (that was so strange to understand) got off too.
Thank you guys who posted answers for your help, your answers were correct but I had a completely different use case that's why no solution was working!
I just trying to create a custom Formik <Field />. It is a <input type = file /> with opacity=0 and depending of values i styling my <Error /> component and <input type = text />. values.photo is ok. The problem is that touched never becoming true, so i can't show my <Error /> component. Can you explain what goes wrong?
https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js
in your file input component just add this:
form.setTouched({...form.touched,[field.name]: true });
setTouched take object of fields and field.name is the file input name.
when you handle the file input by listening to onChange event.
As soon as that onChange method is called you can mark your field asTouched by calling
.markAsTouched() so that it would show the error if the condition in validated.
vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.
<form>
<datepicker placeholder="Select Date" required></datepicker>
<button>Submit</button>
</form>
You can use the above code and test here:
https://codesandbox.io/s/p92k8l717
Here is the link to repo and doc: https://github.com/charliekassel/vuejs-datepicker
You can use vee-validate library to validate this like:
<date-picker :input-class="{'input': true, 'is-danger': errors.has('date') }"
v-model="date"
:disabled="state.disabled"
placeholder="Select date"
input-class="form-control"
></date-picker>
<span v-show="errors.has('date')" class="help is-danger-red">{{ errors.first('date') }}</span>
<input type="hidden" name="date" v-validate="'required'" v-model="date">
You can use this trick to solve this issue, It's works for me.
You can use input-attr to set the required attribute like :input-attr="{required: 'true'}"
I was facing the similar issue, not with this plugin but some other plugin and one get around that worked for me was using vee-validate
This is the best validation plugin available for vue-js.
Hope this helps!
A non-Vue datepicker library flatpickr also has this problem. I managed to resolve it by allowing user input (typeable prop of this library) which removes the readonly attribute which actually prevents the form submission on empty required field and also displays the native browser popup. The side effect is a date can now be directly typed into the input field which then forces you to parse the user input. To make up for that you have to suppress all user input in the field.
See the similar flatpickr question where I posted the complete solution. I used the onReady event of flatpickr which seems to have no equivalent in vuejs-datepicker settings unfortunately.
Flatpickr can be used in Vue thanks to vue-flatpickr-component library if you are OK with migrating.
Is it possible to change the language of the error message required? I know that I can add a message in my language required title="Message", but I want to change the languge of the default: please fill out this field. In other words: I do not want to supply a custom text. I want to force a language for the default messages.
I tried setting the lang attribute and also sent a Content-Language header but it always uses the browser's default language instead.
How can I do this? Thank you in advance.
Since you're using HTML5 for validation, I'm assuming this only needs to support the latest browsers. So, you can use the JavaScript method setCustomValidity().
The string you supply to that method will change the error message for its member DOM element, which shows when the contents are invalid.
HTML:
<form>
<input id="eml" type="email" required />
<input type="submit" />
</form>
JavaScript:
document.getElementById('eml').setCustomValidity('Dude. That e-mail is whack!');
jsFiddle
In SharePoint 2010 client object model (JavaScript), I am using this caml query to download list items.
There is a column called 'Office' and in it, there are several check boxes (i.e. its a multi-select field). I am looking to get the items where the checkbox in the Office field, that has the name 'Toronto' is checked. I don't want to consider the values of the other checkboxes in the Office field. This query below is not working though because I am getting 0 items, when I know I should be getting more.
var camlquerystring = "
<View>
<Query>
<Where>
<Eq>
<FieldRef Name='Office'/>
<Value Type='Boolean'>
Toronto
</Value>
</Eq>
</Where>
<OrderBy>
<FieldRef Name='Modified' Ascending='FALSE' />
</OrderBy>
</Query>
</View>";
Does anyone know what is wrong?
Thanks.
I got the solution:
Change <Value Type='Boolean'> to <Value Type='Text'> or <Value Type='MultiChoice'>.
Source:
http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopmentprevious/thread/b20b1945-4b73-4320-8666-957650dc6a20