I was doing some tests and I noticed that my properties are not valid when I used underscore.
Example:
new Vue({
el : "#form",
data: {
errors: [],
_username: '',
_password: ''
});
on html file:
<input class="uk-input" type="text" v-model="_username" >
<input class="uk-input" type="password" v-model="_password">
With the code above the app won't render. If I remove the underscore it will work, does someone knows why this happens?
The answer may be found in the documentation
Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property
In your templates, you will have to reference $data._username / $data._password, eg
<input class="uk-input" type="text" v-model="$data._username" >
<input class="uk-input" type="password" v-model="$data._password">
Demo here ~ https://jsfiddle.net/9bzxuecj/2/
Related
I have an Expressjs application which uses PUG as view template compiler. I am on a registration form page.
I have the following code:
<div class="input-field">
<input type="email" name="email" id="email" value="!{req.email}">
<label for="email">Email address</label>
</div>
When browsing the route which renders the file, script crashes under the following error:
Cannot read property 'email' of undefined
Though I know req.email is undefined, I need it there to render the email address in case user inputs it and sends it through the form. How to ignore the error and keep the script execution going?
You could use a ternary conditional to check if the req object exists and has an email property, and if not, render an empty value attribute:
input#email(
type='email',
name='email',
value= (req && req.email) ? req.email : ''
)
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!
Using Vee-Validate, when using a custom validator along with the confirmed rule, the confirmed rule always fails validation. The custom validator is specified on the input field being confirmed like so:
<input type="password" placeholder="Password" data-vv-as="password" v-model="password" name="password" v-validate="'required|min:8|has_upper'" />
<input type="password" placeholder="Password" data-vv-as="confirm" v-model="confirmPassword" name="confirmPassword" v-validate="'required|confirmed:password'" />
Here is my Vue instance:
(function (Vue, VeeValidate) {
VeeValidate.Validator.extend('has_upper', {
getMessage: function (field) {
return 'The ' + field + ' must contain an upper case letter';
},
validate: function (value) {
return /^(?=.*[A-Z]).+$/.test(value);
}
});
Vue.use(VeeValidate);
var enroll = {
el: "#app",
data: {
password:'',
confirmPassword: ''
}
}
var app = new Vue(enroll);
})(Vue, VeeValidate)
The custom validator for the password field is triggering as expected, however, as mentioned the confirmed rule is always failing for the confirm password model.
Recently in Vee-Validate (2.1.0 and greater), they've changed how parameters work for these. Now, the target of confirmed has to be a ref, so this will work:
<input type="password" ref="password" name="password" v-validate="'required'" />
<input type="password" v-model="confirmPassword" name="confirmPassword" v-validate="'confirmed:password'" />
The only change you really need to make is to add ref="password" to your password input.
See here for the author talking about this change: https://github.com/baianat/vee-validate/issues/1415
So far I don't see any changes in the documentation, but I assume it will come.
Working example: https://codesandbox.io/s/km4lw12823
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 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.