Sometimes it would be more convenient to customize a validation message with a label rather than the property. For example:
Let's imagine there is a field in form named 'x' but the UI interface shows it as 'Name' (the field label). But, as fas as I understand, the customizazion of a validation message does allow only the use of properties, that is name fields.
validations: {
required: "The field {property} is required.",
}
Is there a way to use a label to customize the above message?
Thank you!
Related
i am building an app with element UI and when using tables with sorting capabilities, i can't change the sorting caret, bby default it's a filled triangle but i want to change it to an SVG icon i have.
here is the default icon :
Is there a way to change it, as the official docs don't specify how, or give any slot for it in headers.
It seems to me that you can't change it, looking at the interface you can see that it receives four parameters, but the documentation indicates two.
Documentation
:default-sort="{ prop: 'date', order: 'descending' }"
Interface
interface Sort {
prop: string;
order: 'ascending' | 'descending';
init?: any;
silent?: any;
}
if you manage to do it, I'm interested in knowing how you did it.
I am trying to set rules to control buttons that are inside of v-text-area on Vue2/Vuetify. How can I do this?
I tried several things, please do not judge me i am beginner of coding concept
In order to use Vuetify validation rules, you need to wrap all elements on which you want to perform validation in a <v-form> element.
On your input components, you need to provide an array to the rules prop with the names of functions you define which perform validation.
The functions which validate take the value as an input and return true if the input is valid and false or a failure string if the input is invalid.
An example of such a function defined in the methods section would be:
isNumber(input) {
return /[0-9]+/g.test(input) || "input must be a number";
}
Passing it to your v-text-area would look like this:
<v-text-area :rules="[isNumber]" />
More info is available in the #rules section of Vueitfy's Form docs.
I'm trying to create a password textfield and I want the user to enter at least 8 characters. I really like the way the visible maxLength character counter on textfields work when a maxlength is set, and I was wondering if there is any equivalent for a minimum length. Thanks!
You have to use TextFormField instead of TextField.
Check this SO post:
For Text Field Validation use TextFormField instead of TextField.
TextFormField needs to be wrapped with Form widget (If there are
two ore more textformfields you can wrap their parent widget with form
widget).Form widget requires key and autovalidate boolean (it's
optional but it's recommended to show message to user when they
haven't validated and as soon as they validate message stops showing).
We create two variables and assign it to Form.Then we need a
validator in which we validate according to our requirements.(If you need to add more validations you can add multiple if
conditions.).Finally on field submitted we check if user has validated
the form if validated we perform our desired action else we set
autovalidate variable to true to perform autovalidation.
E.g.
TextFormField(
...
validator: (String value) {
return value.length < 8 ? 'Minimum character length is 8' : null;
}
)
I am building a "filter component" that displays all available filters for that "product type".
Pretty standard pretty much just think of bestbuy, amazon, craiglist style filter.
Right now I am focusing on how to generate the filter options(not how to handle once a user clicks on a filter option and it must then go off and filter the results down).
So I created a json object that has something like this,
which will create each header section(HardDrive,Ram Size, Number of CPU Cores), what type is it(checkboxes, textboxes),
should the section be opened,
should it have a search box in it.
{
type: "", // this is what type of filter it will be (textbox, checkboxes and etc)
header: "Filter Header",
property: "", // this maps it back to the column name in db used when filter is actually triggered.
hasSearchBox: false, // some filter options are long so search box can be shown.
isOpen: true, // controls if this filter should be in an open or closed state.
for: ["What Products this filter applies to. Some of these filters are common between all products"]
},
Now I need to figure out if I should store the above as is or if I should break it into a column format.
Ie
Filters Tbl
Id
ProductTypeId
type
header
property
hasSearchBox
isOpen
This does make it easier to add a new filter in the future, but I am bit concerned if some new option comes in that might only be for some filters and not others(ie lots of null columns) or if I need a more complex objects in the future(like setting the placeholder name for the textbox).
or if I should store it like this
ProductTypeTable
Id
FilterOptions <--- json from above gets store in here.
Is there a way to turn off or disable client site validation in dojo's form widget datetextbox. I would like users to be able to type the date in if they want and support most common date formats
Your question is not quite clear at "disable client site validation". If I understand you correct, you are asking to be able input any value manually and also be able to use date dropdown pickup.
There is an _isInvalidDate method you can try to overwrite like:
new DateTextBox({
value: "31-DEC-2009",
name: "oracle",
_isInvalidDate: function(){return false;}
onChange: function(v){ }
}, "oracle");
Since this is an internal(private) method, it is not suggested but may work.
There is another method you can feel free to overwrite to use your own validation Regexp in constrints:
validator: function(/*anything*/ value, /*__Constraints*/ constraints){