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
Related
On my vue page I have three different inputs:
<input
id="id"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="text"
name="id"
v-model="id"
placeholder="Enter your email or phone number..."
/>
<input
v-show="phone"
id="phone"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="tel"
name="phone"
v-model="phone"
required
placeholder="Enter your phone number..."
/>
<input
v-show="email"
id="email"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="email"
name="email"
v-model="email"
required
placeholder="Enter your email..."
/>
Now the first id field is the default field that shows on my page. When the user starts typing I have a watcher to watch the value of "id". If it's a string then it swaps the default text field for the email field.
If it's numeric then it swaps it for the tel field.
This is the watcher:
watch: {
id(newVal, oldVal) {
if (this.startsWithLetter(newVal)) {
this.$nextTick(() => {
this.phone = null
this.email = newVal
this.$el.querySelector('#email').focus()
})
} else {
this.$nextTick(() => {
this.email = null
this.phone = newVal
this.$el.querySelector('#phone').focus()
})
}
},
},
Now this works however I've realised the focus simply does not work when the new field is swapped in. The new field doesn't get focus and the soft keyboard hides itself.
I'm not sure exactly of what you're trying to achieve here. Seems a bit hard to understand for me.
Meanwhile, here is a simple example on how to have a dynamic input type depending of the content of the input.
<template>
<div>input: <input v-model="userInput" :type="phoneOrText" /></div>
</template>
<script>
export default {
data() {
return {
userInput: '',
}
},
computed: {
phoneOrText() {
return /\d/.test(this.userInput) ? 'tel' : 'text'
},
},
}
</script>
The input will be text if the input contains only text and will swap to tel if it contains any numbers thanks to the /\d\ regex (any digit). I've chosen password for the screenshots because it is more visual but it can be anything. tel is working great on phone too and does not require any focus() or selection.
Not sure if it helps but right now, it seems a bit too cryptic for me to help you more.
I wanted to create a custom component to use Vee-Validate scopes to display the error.
Currently for the forms with the scope i am doing in a following ways.
Submit Method:
methods: {
onSubmit(scope) {
console.log(this.$validator)
this.$validator.validateAll().then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}
HTML
<label>Name</label>
<input v-model="form_fields.name" data-vv-as="Partner name" data-vv-name="PartnerName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('form-partner.PartnerName') }" type="text" class="form-control">
<div v-show="errors.has('form-partner.PartnerName')" class="help is-danger text-red">{{ errors.first('form-partner.PartnerName') }}</div>
which means i have to repeat errors.has('form-partner.PartnerName') multiple times, all over the forms.
I wanted to simplified as below.
<error-form :status="errors" :css-class="'is-danger'" label="Company Name" field="name">
<b-form-input v-validate="'required'" class="form-control" v-model="form_fields.name" name="name" data-vv-as="Company Name"
type="text" />
</error-form>
Similar to the implementation from here! but this is not working with the scopes.
I wanted to have the validation done with scopes. I will pass the scopes to the error-form as a prop like shown below.
///scope here
<error-form :status="errors" :scope='form-registraion' :css-class="'is-danger'" label="Company Name" field="name">
So, how i can check on my error-form component with the scopes? scopes could be mandatory or required.
Vue.js 2 - I am trying to bind form inputs but I always get the erro message ( on all inputs ..)
v-on:model="form.email" expects a function value, got undefined
<form id="registrationForm">
<div class="form-group">
<input type="email" name="email" id="email" #model="form.email" placeholder="enter your email address">
</div>
<button #click="sendRegistration" type="submit" class="btn btn-primary btn-gradient submit">SEND</button>
</form>
and the script
data: function() {
return {
form: {
...
email: '',
...
}
}
},
methods: {
sendRegistration: function() {
console.log('sending form')
return false
}
},
You're getting some things mixed up. Attributes starting with v-on:, often abbreviated as #, are used to register event listeners on elements. #click="sendRegistration" will for example register the sendRegistration method defined on your Vue instance as a handler for that element's click event.
What you're trying to accomplish has nothing to do with event handling. The attribute you need is called v-model and binds an <input>'s value to a value saved on your Vue instance.
<input type="email" name="email" id="email" #model="form.email">
should be
<input type="email" name="email" id="email" v-model="form.email">
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/
I have searched high and low for solution for this but I have not been able to find anything. I am playing around with the dojo ValidatationTextBox dijit. I have tried to both declarative and programmatic methods and every time it comes up as a readonly input field. The code provided shows my attempt using the declarative method. I got the exact same result using a programmatic route similar to the "new textbox" calls below. In both methods the html for the ValidatationTextBox is generated with two child divs. One with class=dijitReset dijitValidationContainer and one with class=dijitReset dijitInputField dijitInputContainer. It is the later class that holds all of the html input and dijit properties and the former that defines the form as readonly and also gives it a value of 'x'. What am I doing wrong? Any help or explanation regarding why this is not working will be much appreciated. Thanks
<script>
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/ValidationTextBox","dojo/domReady!","dojox/validate","dojox/validate/web"],
function(parser, textbox, ValidationTextBox,validate){
parser.parse();
new textbox({
id: "fName",
maxlength: 25,
name: "fName",
trim: "true",
propercase: "true"
}, "fName");
new textbox({
id: "lName",
maxlength: 25,
name: "lName",
trim: "true",
propercase: "true"
}, "lName");
});
</script>
</head>
<body class="tundra">
<h3>Sign-up for our great offers:</h3>
<form id="registration_form">
<div class="grouping">
<label for="fName">First Name:</label>
<input id="fName" /><br />
<label for="lName">Last Name:</label>
<input id="lName" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" required="true" readonly="false"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp:'[a-z0-9._%+-]+#[a-z0-9-]+\.[a-z]{2,4}', invalidMessage:'Please enter a valid e-mail address'" /><br />
<button id="btn">Sign Up!</button>
</div>
</form>
</body>
I think the problem may be with your regExp however you can write a keyup function and call it when the user types it will validate the email address using Dojo's built in email validation. Also for your fname and lname fields try setting required = "true". You can do this to implement on the fly validation since if your fields are not required you need to call validation on your form when you post. You can refer to this Form Validation Fiddle
HTML
<input type= "text" name ="email" data-dojo-type="dijit/form/ValidationTextBox" missingMessage="Email Address Required" invalidMessage="Invalid Email Address" onkeyup="validateMe(this.value);" required="true" />
js
function validateMe(email){
var isValid = false;
isValid = dojox.validate.isEmailAddress(email);
return isValid;
}