This example shows a very small form made with vue-formulate:
https://codesandbox.io/s/vue-formulate-reseting-form-does-not-initiate-validation-message-again-yxruq
The input field takes a string of at least 4 of characters. Upon hitting submit, the form is reset via
this.$formulate.reset(‘[name-of-the-form]‘)
It does indeed clear the form. But the validation message does not appear again.
What has to be done to fix this? Or could this be a bug?
Looks like the $formulate.resetValidation() method is a bit over aggressive depending on the validation behavior assigned. You can "undo" this by applying a ref to the form, and then explicitly iterating over the registry:
<FormulateForm
...
ref="form"
>
// in your submit handler:
this.$refs.form.registry.map((input) => {
input.formShouldShowErrors = true;
})
Updated reproduction: https://codesandbox.io/s/vue-formulate-reseting-form-does-not-initiate-validation-message-again-forked-kn12h?file=/src/components/Reproduction.vue
Related
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I have a DetailsList for which I need to keep track of the current selection. My problem is I need to update my state when the user changes the selection, but also be able to set the selection when a new row is added. If I'm listening to user events via onSelectionChanged, I can't call setSelectionKey because it will just cycle back and forth.
Possibly related is that since I am adding a new row, I can't select it until the render that repopulates the items, but I'm not sure when I would even call setSelectedKey to ensure that's already done.
I have a version that kind of works by setting a flag to call setItems and then setSelectedKey while temporarily telling onSelectionChanged to ignore it, but I believe it's causing extra renders and doesn't work in all situations.
Thanks for any guidance.
I figured it out. The problem was I was just setting the previously selected item to selected, e.g. selection.setKeySelected(item.id, true). The secret turned out to be setting all of the other items to not be selected. Here are the relevant parts:
const selection = new Selection({
getKey: item => item.id,
onSelectionChanged: () => {
the_chosen_one = selection.getSelection()[0];
// ... do whatever with the item the user just selected ...
}
});
...
// In some handler when you need to select/re-select an item:
const onWhatever = () => {
setChangeEvents(false);
state.items.forEach(item => {
selection.setKeySelected(item.id, item.id === the_chosen_one.id);
});
setChangeEvents(true);
};
...
<DetailsList selection={selection} items={state.items} ...
I'm not sure the setChangeEvents part is necessary, but it didn't hurt. The documentation on this is non-existent so the only way to figure it out is reading the code and browsing through Github issues, but a lot of those turned out to be dead ends. I still don't understand why I have to explicitly de-select items that were never selected in the first place, but that's what it was.
I hope this helps someone else some day.
I have an input field for a value that should have exactly 5 digits. I would like to show errors when typing characters other than digits immediatly (onChange) but showing the error for unsufficient string length only on blur.
My rule looks like so at the moment:
ValidationRules
.ensure("myInput")
.matches(new RegExp(/[0-9]/))
.minLength(5)
.on(this);
MaxLength is restricted by setting maxlength in html.
If I set the validation trigger to "onChange" to get an immediate response to wrong characters I also get an error shown for not satisfying the minLength rule while typing correct digits until having typed 5 of them.
The behavior I would like to have is to apply the matches-rule onChange and the minLength-rule onBlur.
Is there any possibility to apply two rules on the same property on different events? I know how to validate manually but I don't know how to differenciate between rules.
You can use the when fluent API to satisfy your needs. Something like this -
ValidationRules
.ensure('email')
.email()
.required()
.when((order) => {
if (order.length > 4) {
order._ruleHasBeenMet = true;
}
return order.length > 4 && order._ruleHasBeenMet;
}
.withMessage('Email is required when shipment notifications have been requested.');
Encouraged by #PWKad's answer I played a little with .when() and came up with this:
I changed the validate trigger to "validateOnChangeAndBlur" and added a reference to my field:
<input type="text" value.bind="myInput & validateOnChangeAndBlur" maxlength="5" ref="myInputRef">
I extended the validation rule with a conditional validation checking if my input has focus as I only want to validate length when the input loses focus:
ValidationRules
.ensure("myInput")
.matches(new RegExp(/[0-9]/))
.minLength(5)
.when(() => this.dwKapitel !== document.activeElement)
.on(this);
This works like I expect it to work.
I have a page built in ASP.NET MVC 4 that uses the jquery.validate.unobtrusive library for client side validation. There is an input that needs to be within a range of numbers. However, this range can change dynamically based on user interactions with other parts of the form.
The defaults validate just fine, however after updating the data-rule-range attribute, the validation and message are still triggered on the original values.
Here is the input on initial page load:
<input id="amount" data-rule-range="[1,350]" data-msg-range="Please enter an amount between ${0} and ${1}">
This validates correctly with the message Please enter an amount between $1 and $350 if a number greater than 350 is entered.
After an event fires elsewhere, the data-rule-range is updated and the element looks as such:
<input id="amount" data-rule-range="[1,600]" data-msg-range="Please enter an amount between ${0} and ${1}">
At this point if 500 is entered into the input it will fail validation with the same previous message stating it must be between $1 and $350. I have also tried removing the validator and unobtrusiveValidation from the form and parsing it again with no luck.
$('form').removeData('validator');
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
Is there a clean way to change the validation behavior based on the input attributes dynamically?
As Sparky pointed out changing default attributes dynamically will not be picked up after the validation plugin has been initialized. To best work around this without rewiring how we register validated fields and rules, I found it easiest to register a custom adapter in the unobtrusive library:
jQuery.validator.unobtrusive.adapters.add("amount", {}, function (options) {
options.rules["amount"] = true;
options.messages["amount"] = function () { return $(options.element).attr('data-val-amount'); };
});
jQuery.validator.addMethod("amount", function (val, el, params) {
try {
var max = $(el).attr('data-amount-max');
var min = $(el).attr('data-amount-min');
return val <= max && val >= min;
} catch (e) {
console.log("Attribute data-amount-max or data-amount-min missing from input");
return false;
}
});
Because the message is a function, it will be evaluated every time and always pick up the latest attribute value for data-val-amount. The downside to this solution is that everytime there is a change we need to change all three attributes on the input: data-amount-min, data-amount-max, and data-val-amount.
Finally here is the input markup on initial load. The only attribute that needs to be present on load is data-val-amount.
<input id="amount" data-val-amount="Please enter an amount between ${0} and ${1}" data-val="true">
You cannot change rules dynamically by changing the data attributes. That's because the jQuery Validate plugin is initialized with the existing attributes on page load... there is no way for the plugin to auto re-initialize after dynamic changes are made to the attributes.
You must use the .rules('add') and .rules('remove') methods provided by the developer.
See: http://jqueryvalidation.org/rules/
you can try this one:
// reset the form's validator
$("form").removeData("validator");
// change the range
$("#amount").attr("data-rule-range", "[1,600]");
// reapply the form's validator
$.validator.unobtrusive.parse(document);
charle's solution works! you cannot have model attributes to use it though, I build my inputs like:
#Html.TextBoxFor(m => Model.EnterValue, new
{
#class = "form-control",
id="xxxx"
data_val = "true",
data_val_range = String.Format(Messages.ValueTooBig, Model.ParamName),
data_val_range_max = 6,
data_val_range_min = 2,
data_val_regex_pattern = "^\\d+(,\\d{1,2})?$"
})
and then in javascript:
$("form").removeData("validator");
$("#xxxx").attr('data-val-range-max', 3)
$("#xxxx").attr('data-val-range-min', 0)
$.validator.unobtrusive.parse(document);