On this page https://bootstrap-vue.js.org/docs/reference/validation/ of the documentation of bootstrap-vue, they are giving an example of how to use vee-validate.
However, their example doesn't work for me, because i get a warning saying [vee-validate] A field is missing a "name" or "data-vv-name" attribute. In deed, there is no name or data-vv-name attribute in their example and after adding one of them, it works like a charm.
Is this example outdated / wrong?
<b-form-input id="example-input-1" v-model="form.name" v-validate="{ required: true, min:2 }":state="validateState('form.name')" aria-describedby="input-1-live-feedback" placeholder="Enter name"enter code here></b-form-input>
The documentation has been updated to require name attribute and not v-model binding.
<input v-validate="'required|email'" type="email" name="email">
So Yes. this needs to be updated
Related
My HTML fragment is:
<label class="email">
Email
<input data-test="email" type="text" v-model="curMember.email_address">
</label>
Then in my cypress test the following 'GET' does not work (using attribute selector):
cy.get('[data-test="email"]').should('have.value', 'a#test.com')
the above times out trying to find the element but the folowing does work (using a class selector)
cy.get('.email>input').should('have.value', 'a#test.com')
Can anyone tell me what my problem is?
I am not sure that cypress provides of getting value from NON-class
but take a look at this https://docs.cypress.io/api/commands/get.html#Selector
for the first example, you can only check the length
cy.get('[data-test="email"]').should('have.length', '10')
I have a variety of HTML select elements inside of Nuxt.js. I'm also using Vuelidate for validation and this is working as expected. This is a typical select box in my form:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="{error: appendErrorClass($v.form.location)}"
>
<option :value="null" hidden>Choose...</option>
<option
v-for="(item, index) in $store.state.quotes.data.practiceStates"
:key="index"
:value="item.data">
{{item.display}}
</option>
</select>
Before selecting any of the options, I'm noticing the following on all select fields.
I've tried removing any Vue magic on a test select field to see if the same results happen.
<select id="location1" name="location1">
<option value="" hidden>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
Still seeing valid: true. Is there anything I'm overlooking that would cause the validity to default to true? Thanks in advance for any help or guidance on this issue.
UPDATE For Clarification:
Vuelidate validation works just fine. The issue I'm dealing with is the select field property Validity.validate. I only mention Vuelidate to give full context.
HTML Select is a sort of "strange" form element in that validity is typically checking to see if there's a readable value. Since a select always has something picked, it validates...
This is different from say a telephone input that has a specific pattern required to be valid.
I haven't used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there's a good chance it's simply validating that a value exists so Any selcted item would qualify.
In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"
#PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.
I have since updated that dynamic class to be a mixin that looks like this:
export default {
methods: {
appendErrorAndValidityClass(field) {
return {
error: field.$error,
invalid: field.$invalid,
};
}
}
};
After importing the mixin into the Vue partial, my select box looks like this:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="appendErrorAndValidityClass($v.form.location)"
>
This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.
So I'm using Vue with the template written in Pug and I'd like to use a bit of CoffeeScript in the Pug markdown.
Something like this:
input( v-model.trim="#[:coffee-script user?.details?.last_name]" type="text" placeholder="Last name")
... since user, details and last_name are not guarenteed to exist and I'd like to use Coffee's existential chaining.
But I get an invalid expression: Invalid or unexpected token in #[:coffee-script user?.details?.last_name] error.
I also tried input( v-model.trim=":coffee-script user?.details?.last_name" type="text" placeholder="Email address") to no avail.
Is this possible? If not, is there another, short way of guarding against undefined values?
PS: I did npm install —save jstransformer-coffee-script
Two equal examples (according to Vue.js) work differently:
First
<input v-model="value" #input.once="setDirty" type="text" id="object-email">
Second:
<input v-bind:value="value" v-on:input="value = $event.target.value"
#input.once="setDirty"
type="text"
id="object-email">
In the first example value changes only after second input, while the second example works correctly.
If we delete #input.once attribute, two examples will work fine.
P.S. Vue 2.4.0
This was a bug that was fixed in version 2.4.3.
As a workaround for previous versions, you can simply use #keydown.once="setDirty" instead of #input.once.
I have an issue where a .net core input tag helper does not appear to be rendering correctly.
<input id="FullName" type="text" class="standard-textbox" asp-for="Contact.FullName" data-validation-required="#Html.Raw(Contact.FullNameValidationErrorMessage.Trim())" placeholder="#Contact.FullNameLabel.Trim()" required />
This is being rendered as:
<input id="FullName" type="text" class="standard-textbox" asp-for="Contact.FullName" data-validation-required="Please enter your name so we know who we're talking to." placeholder="Your full name" required="" aria-required="true" aria-describedby="FullName-error">
You will note the asp-for helper is not being re-rendered as a "name" attribute.
On another site, which uses essentially the same form, the input field is rendered correctly with asp-for being changed to name.
Figured it out!
The Views/_ViewImports.cshtml file was missing the following line:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Adding this line to the file fixed this issue.