When validating a group of fields, an error is shown for fields that are hidden in the DOM with a v-if attribute.
For example, I've got 3 fields:
<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />
When I run my submit func I'm checking that none of the fields contain errors:
this.$validator.validateAll().then(() => {
... my check
});
I see the following error:
Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#3". Use "attach()" first.
Detaching and reattaching my 'foobar' field as I update the "showMe" state seems verbose. Especially for my larger multistep forms.
Is there an easier way to prevent this error from appearing?
You need to combine v-show with dynamically applied validation rules. This is where you pass the rules as an object, with the first key:value being the rule name and a boolean for if required (which can be the same as the v-if boolean).
For VeeValidate 2 (old version in question)
<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />
See Sandbox Example for VeeValidate2
For VeeValidate 3
<validation-provider rules="required">
<input type="text" v-model="foo">
</validation-provider>
<validation-provider :rules="{required: showMe}">
<input type="text" v-model="bar" v-show="showMe">
</validation-provider>
See Sandbox Example for VeeValidate 3.
If you want to run a validation on hidden input, you just need to set field's display to none:
<input style="display: none">
This method works fine for me!
Related
Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.
I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?
<div class="min-section">
<label>Min</label>
<input type="text"
class="uk-input"
name="min-amount"
v-validate="'numeric'"
v-model="minAmount" />
</div>
<div class="max-section">
<label>Max</label>
<input type="text"
class="uk-input"
name="max-amount"
v-validate="'numeric'"
v-model="maxAmount"/>
</div>
You could bind min_value in the v-validate rules of the max-amount <input>:
<input name="min-amount" v-model="minAmount">
<input name="max-amount"
v-validate="'numeric|min_value:' + minAmount"
v-model="maxAmount">
demo
Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.
I am using Laravel 5.6.7 with vue.js for form validation. I have successfully installed using npm install vee-validate#next --save
<form role="form">
<select name="Role_ID" v-validate data-vv-rules="required">
<option :value="-1" selected>Please select Role</option>
<option v-for="RoleRecord in RoleRecords" :value="RoleRecord.Role_ID">
{{RoleRecord.Role}}
</option>
</select>
<p v-if="errors.has('Role_ID')">{{ errors.first('Role_ID') }}</p>
<!-- UserName -->
<div>
<label>UserName</label>
<div class="col-md-9">
<input name="User Name" v-validate data-vv-rules="required" type="text"
v-model="createForm.UserName">
<p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>
</div>
</div>
<button type="button" #click="validateBeforeSubmit()">
Save Changes
</button>
</form>
<script>
export default {
methods: {
validateBeforeSubmit() {
this.$validator.validateAll();
}
}
}
</script>
My findings
Due to some reasons the option is not being validated.
There is UserName field which is working perfectly.
I am expecting that it should show the error message if the option selected value is less then 0
Am I missing anything? Please let me know if you need more info.
in the vee-validate doc,
The field under validation must have a non-empty value. By default,
all validators pass the validation if they have "empty values" unless
they are required. Those empty values are: empty strings, undefined,
null.
-1 is still considered a valid value for required validation. Use specified empty values instead. (Namely: empty strings, undefined, null)
e.g.
<option :value="null" selected>Please select Role</option>
This should trigger the required validation.
Example: https://codepen.io/jacobgoh101/pen/geaqwr?editors=1011
There's a difference between your naming:
<input name="User Name" v-validate data-vv-rules="required" type="text" v-model="createForm.UserName">
<p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>
v-model uses UserName (without spacing). The name-attribute in your input and errors.has + errors.first are using User Name (with spacing). Please make sure you're naming things exactly the same, both in front-end as well as in back-end (and preferably without whitespace).
I have previously successfully implement this behaviour but for some reason it's not working. I am fairly new to Vue.js and I might be missing something.
I have two radio buttons as such:
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmLoginRadio" value="true" v-model="loginRadio" checked>
No, I am new to this site
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmRegisterRadio" value="false" v-model="loginRadio">
Yes, my password is:
</label>
</div>
They both have a v-model of loginRadio which is initially set to false. When the second radio button is clicked, the disabled input button below should be enabled again.
<input type="password" class="form-control" name="password" :disabled="loginRadio">
However, for some reason, the only thing that is happening is this (when I used Chrome Debug)
<input type="password" class="form-control" name="password" disabled="false">
and the element stays disabled. What am I doing wrong?
You did not use v-bind:for the value attribute of the input buttons
Therefore, loginRadio does not contain boolean values true or false (depending on selection), but strings: "true" and "false"
it should be enough to properly bind the value attribute on both input buttons:
:value="true"
:value="false"
I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this.
This is not working:
this.form.password
I want to get the Value of this field:
<paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input>
I also want get the Input for submitting of the e-mail input:
<paper-input label="Login" id="email" name="email" size="25" value=""></paper-input>
For submitting I am using:
<paper-button raised value="Login" type="submit" onclick="formhash(this.form, this.form.password);">Login</paper-button>
With normal input fields is this working.
You can use document.querySelector('#password').value to get the value of paper-input with id password in the formhash() function call or inside the function definition.
You can also use polymer's Automatic node finding to get value of an element using its id. In which keep the form/input in custom-element and use this.$.password.value to get the value of an element with id password. Like this
<!-- create a custom component my-form -->
<dom-module id="my-form">
<template>
<form is="iron-form" id="form" method="post">
<paper-input name="name" label="name" id="name"></paper-input>
<paper-button raised on-click="submitForm">Submit</paper-button>
</form>
</template>
<script type="text/javascript">
Polymer({
is: "my-form",
submitForm: function() {
alert(this.$.name.value);
if(this.$.name.value != "") // whatever input check
this.$.form.submit();
}
})
</script>
</dom-module>
<my-form></my-form> <!-- use custom-component my-form -->
If you don't want to use <form> you can also simply store the paper-input values in instance variables and use them later wherever you want.
All you have to do is store the input inside a value like this:
<paper-input label="Password" type="password" id="password" name="password" size="25" value="{{valueNameToStore}}"></paper-input>
And later access it like this:
var myPassword = this.valueNameToStore;
Using <form is="iron-form"> allows you to use <paper-input> and other input elements in forms https://elements.polymer-project.org/elements/iron-form
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input name="name" label="name"></paper-input>
<input name="address">
...
<paper-button raised onclick="submitForm()">Submit</paper-button>
</form>
function submitForm() {
document.getElementById('form').submit();
}
or, sometimes you can try this.$.password.value to get the value for password.
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).