I'm using Bootstrap-Vue form inputs, and using Vuelidate to validate. Currently on user input, I get the outline colour (red or green) and a tickbox or a cross depending if valid or invalid. I now want to change this behaviour so that it only shows this on blur. I added the following line of code to my input, however the same behaviour occurs:
#blur="$v.form.code_part1.$touch()"
Here is my full code for an input, please can you explain where I am going wrong, or how to approach this correctly?
<b-form-input
:class="{ 'hasError': $v.form.code_part2.$error }"
placeholder="Next Four"
v-model="$v.form.code_part2.$model"
#blur="$v.form.code_part1.$touch()"
:state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
class="form-control mb-3"
name="Part 2"
id="code_part2"
type="text"
maxlength="4"
aria-label="Next Four"
></b-form-input>
Add the .native modifier
#blur.native="$v.form.code_part1.$touch()"
Binding Native Events to Components
Related
Sometimes I don't want to have a "rules" option/property in some input fields, is it possible within vuejs3 to set up a kind of if statement so that the property "rules" are only presented on certain fields? Because now i just do an empty array[]. But would rather see this differently.
So that I dont need to apply "rules" option in my form scheme when I dont need it.
This is my template code:
<div v-for="(prop, key) in formSchema" :key="key">
<q-input v-if="prop.component === 'input'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:label="prop.label"
maxlength="12"
class="super-small"
hint="Name and surname"
lazy-rules
:rules="prop.rules" (want this behind an if statement if not needed)
>
</q-input>
<q-select v-else-if="prop.component === 'select'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:options="prop.options"
:label="prop.label">
</q-select>
</div>
Add a ternary condition within your attribute. When the attribute is set to null or undefined it gets omitted.
:rules="addRule ? prop.rules : null"
As we know v-model is two way binding. Which means it's combination of V-bind and maybe another attribute which I'm looking for and it updates the data. I have a input which it's value is sometimes custom and sometimes should be read from config based on another parameters.
What I need is an input with a v-bind:value/:value and another for update. I know I can do it with #change and a custom method But I'm looking for something easy, Bottom line is I want V-model without doing v-bind ! Thank You
EDIT: I did it with two input using v-if .
<input type="number" class="item-input" v-if="setting.keto_program=='custom'" id="protein_per_kilo" v-model="setting.keto_program_protein_density">
<input type="number" class="item-input" v-else disabled id="protein_per_kilo" :value="config.keto_programs[setting.keto_program].protein_density">
Anyway doing this using just one input feels better. Thanks
May be you can use computed hook.
computed:{
yourVariable(){
return someVariable/computation
}
}
you can use yourVariable inside your code that will act like v-model without doing v-bind.
yourVariable will be updated as soon as the variables of the return statement of this be changed or updated
Edited:
part of v-model for input tag
<input
v-bind:value="variable"
v-on:input="variable = $event.target.value"
>
or
<input
:value="variable"
#input="variable = $event.target.value"
>
found this via
Vue.js—Difference between v-model and v-bind
I am using element-ui, version 1.43.
I want to add spell-check in text area input(if I write something wrong then red line should appear below that text and on right click i can get suggestion).
How to implement it using element-ui.
If you're using an el-form & el-form-item to wrap your el-input type='textarea' elements, you can utilize the label slot to hook into native browser spellcheck functionality.
<el-form>
...
<el-form-item>
<label slot="label" spellcheck="true">Notes</label>
<el-input type="textarea"></el-input>
</el-form-item>
...
</el-form>
I'm using aurelia-validation#1.0.0-beta.1.0.1.
My scenario is:
I've got a form which has a validation controller and validation rules
There is a containerless custom element in the form which wraps a password input, and exposes the current password as a bindable property
The validate binding behavior is used on the form's binding to this custom element property
The custom element also raises the blur event, so that the validation binding is triggered when the wrapped password input loses focus
The validation lifecycle is working as expected.
The problem I'm running into is with the custom renderer I'm using, which currently assumes the element it receives is the actual DOM input element so that a class can be applied to the input, and a sibling error element can be injected next to it, but here it's receiving the custom element that wraps the input, which can't be handled in the same manner because it's just a comment node in the DOM.
Is there a strategy or API in aurelia-validation that could solve this sort of problem? I'm stumped, and can't find much out there on working with custom elements within validation.
EDIT:
Here is the custom element template:
<template>
<div class="input-group -password">
<div class="input-toggle-wrapper">
<label for="password" class="-hidden" t="fields_Password"></label>
<input
id="password"
type="${isPasswordVisible ? 'text' : 'password'}"
value.bind="password"
t="[placeholder]fields_Password"
maxlength="20"
focus.trigger="onInputFocus()"
blur.trigger="onInputBlur()" />
<div
class="toggle ${isPasswordVisible ? '-show' : ''}"
click.delegate="onToggleClick($event)"
mousedown.delegate="onToggleMouseDown($event)"></div>
</div>
</div>
</template>
I made it containerless because I don't want <password-box> emitted into the DOM as an outer element, as that breaks the current CSS rules for layout (and I don't want to change the CSS).
However if the custom element is containerless then I don't know how to access the first div inside the template using DOM navigation from the comment node that represents the custom element in the DOM.
Unfortunately, Aurelia team has identified this issue and (at least as of now) said they won't fix it. https://github.com/aurelia/templating/issues/140
There is a hacky workaround for the issue as follows:
if(element.nodeType === 8) {
element = this.getPreviusElementSibling(element)
}
If you add that within your render method for your renderer, it should work. Again, hacky, but it gets the job done in lieu of an official fix from the AU team.
I have 2 forms that I am testing using TestStack.Seleno. Both forms have a checkbox that is mandatory. The first form has (including the checkbox) 5 fields. I can use TestStack.Seleno to create a passing test with valid data. I set the checkbox like this:
Input.TickCheckbox(f=>f.Accept,form.Accept);
On my other form which has 10 or so fields, when I try to set the checkbox to be ticked (using the same code) nothing happens. However when I try
var acceptCheckBox = Find.Element(By.Name("Accept"),new TimeSpan(0,0,0,50));
if (form.Accept)
{
acceptCheckBox.Click();
}
I get error "Element is not currently visible and so may not be interacted with"
Element is clearly visible and is not injected in using javascript.
I am using latest version of TestStack.Seleno from github.
Any ideas?
So I have managed to figure out what the issue is and have a work around, however I cannot explain why it works on the other form. The mandatory Accept field has html generated by mvc that looks like
<div>
<input class="check-box" data-val="true" data-val-mustbetrue="The Accept our field is required" data-val-required="The Accept our field is required." id="Accept" name="Accept" type="checkbox" value="true"><input name="Accept" type="hidden" value="false">
<label for="Accept">
Accept our Please accept our Terms and Conditions
</label>
<span class="field-validation-valid" data-valmsg-for="Accept" data-valmsg-replace="true"></span>
</div>
So you have the checkbox and hidden field both with id Accept, I suspect in code seleno is picking up the hidden field and setting value, so I updated my code todo
var acceptCheckBox = Find.Element(By.CssSelector("#Accept.check-box"));
acceptCheckBox.Click();
Now everything works.
Ismail