I am trying to make validation on datepicker such as if a user does not select an date and it gives an errors.for instance "date is required"
You can use the v-model to validate the date.
const app = new Vue({
el: '#app',
data: {
date: null
},
components: {
vuejsDatepicker
},
methods: {
formSubmit() {
if (!this.date) {
alert('Please select a date');
return;
}
console.clear();
console.log('Selected date is ' + this.date);
}
}
})
<div id="app">
<vuejs-datepicker v-model=date :typeable=true>
</vuejs-datepicker>
<input type="submit" v-on:click="formSubmit">
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
You could add required in date picker
<vuejs-datepicker v-model=date :typeable=true required>
</vuejs-datepicker>
This will add a red border around the datepicker.
Related
I tried to show particular string using v-text. But it shows nothing.
Tried code
ccc.handlebars
<div id="app">
<div class="input-group mb-3">
<input type="text" class="form-control" v-text="getValues[0].value">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
'bulk': {{{bulks}}}
},
computed: {
getValues: function() {
return this.bulk;
}
},
methods: {},
});
</script>
getValues retuens JSON
[
{ name: "Dauth", age: "18", value: "TGFR123" }
]
I want to show TGFR123 in the text box
Above getValues returns the correct JSON. But v-text="getValues[0].value" not shows the string. Help me to solve this.
v-text does not work on input.
If you want to set the value of an input use :value or v-model
var app = new Vue({
el: '#app',
data: {
bulk: [{
name: "Dauth",
age: "18",
value: "TGFR123"
}]
},
computed: {
getValues: function() {
return this.bulk;
}
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<div id="app">
Bind : <input type="text" :value="getValues[0].value">
v-model : <input type="text" v-model="getValues[0].value">
<div>Result : {{getValues[0].value}}</div>
</div>
With v-model the data will be changed with the user input
v-text
value binding
You can use v-model or v-bind:value to insert this value in your input
var app = new Vue({
el: '#app',
data: {
bulk: [{id: 123, name: "Test", value: "NerF21_346"}]
},
computed: {
getValues() {
return this.bulk[0].value
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="getValues">
</div>
v-model documentation
I use a Form object to handle all my input fields and validation/errors etc.
new Vue({
el: '#root',
data: {
form: { trainer: '' }
}
And I can use it as v-model like this:
<input v-model='form.trainer' name='trainer'>
I would like to make the form an instance property, because I have to pass it to all my components at the moment.
Vue.prototype.$form = {trainer: ''}
new Vue({ el: '#root' });
However, its not reactive anymore:
<input v-model="$form.trainer">
<span v-text="$form.trainer"></span>
Changes to the input are not reflected on the span.
Is there a solution to use a instance property as v-model?
Using Global Mixin:
You can use Global Mixin and then add form: { trainer: '' } to it and then this option will be available in every Vue instance created afterwards like:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function () {
return {
form: { trainer: '' }
}
}
})
and then you can use it like normal component data option:
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
Demo:
// inject a handler for `myOption` custom option
Vue.mixin({
data: function() {
return {
form: { trainer: '' }
}
}
})
// Define a new component called trainer
Vue.component('trainer', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<trainer></trainer>
<trainer></trainer>
</div>
Demo #2:
var trainer2Data = {
form: { trainer: '' }
}
Vue.mixin({
data: function() {
return trainer2Data;
}
})
// Define a new component called trainer2
Vue.component('trainer2', {
template: `<div>
<input v-model="form.trainer">
<span v-text="form.trainer"></span>
</div>
`
})
new Vue({
el: "#myApp",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
<trainer2></trainer2>
<trainer2></trainer2>
</div>
I have a button, for load files or add some text
After load it pushed in data() prop
How i can validate this prop, if them not have input
Im found only one solution - make watch for data props. and set validate in
Maybe exist more beautiful way?
I try validator.verify() - but it dont send error in main errorBag from validateAll
This is example
<div id="app">
<testc></testc>
</div>
<script type="text/x-template" id="test">
<div>
<input type="text" v-validate="'required'" name="test_vee">
{{errors.first('test_vee')}}
<hr>
<button #click="addRow">Add</button>
<input type="text" v-model="inputValue" name="test_input"/>
<hr>
{{rows}}
<hr>
{{errors.first('rows')}}
<button #click="validateForm">Validate</button>
</div>
</script>
and script
Vue.component('testc', {
template: '#test',
data() {
return {
inputValue: '',
rows: []
}
},
watch: {
rows: {
handler: function(newVal, oldVal) {
this.$validator.errors.remove('rows');
if (this.rows.length < 2) {
this.$validator.errors.add({
id: 'rows',
field: 'rows',
msg: 'Need 2 rows!',
});
}
}
}
},
methods: {
addRow: function() {
this.rows.push(this.inputValue);
this.inputValue = '';
},
validateForm: function(){
this.$validator.validateAll();
}
}
});
Vue.use(VeeValidate);
new Vue({
el: '#app'
})
https://codepen.io/gelid/pen/YBajER
First input in example: default validate - its ok
Second input: for add items - dont need validate or has self validate (not empty for example)
In data of component i have prop rows - it is need validate before ajax request to backend for save data
I want to enable text box to take formatting while tying telephone number into textbox.
Given that the question doesn't have a lot of information on what has been tried or how to achieve it I'll just make a common component that you can reuse for later.
What you can do it with a watcher and a regexp on the field that formats the number to what you want to display
Vue.component('my-phone-input', {
template: `
<div>
<input type="text" v-model="formattedPhoneValue" #keyup="focusOut" #blur="focusOut"/>
</div>`,
data: function() {
return {
phoneValue: 0,
formattedPhoneValue: "0",
preventNextIteration: false
}
},
methods: {
focusOut: function(event) {
if (['Arrow', 'Backspace', 'Shift'].includes(event.key)) {
this.preventNextIteration = true;
return;
}
if (this.preventNextIteration) {
this.preventNextIteration = false;
return;
}
this.phoneValue = this.formattedPhoneValue.replace(/-/g, '').match(/(\d{1,10})/g)[0];
// Format display value based on calculated currencyValue
this.formattedPhoneValue = this.phoneValue.replace(/(\d{1,3})(\d{1,3})(\d{1,4})/g, '$1-$2-$3');
}
}
});
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<my-phone-input></my-phone-input>
</div>
I'm trying to get two input values using one mounted function for the date picker. But not getting how do I do that?
Here is the code:
HTML:
<div id="app">
<form v-on:submit.prevent="saveFleetJob">
<input type="text" class="fleet-date" v-model="item.from">
<input type="text" class="fleet-date" v-model="item.to">
<button class="btn btn-primary">Click</button>
</form>
</div>
Vue code:
new Vue({
el: "#app",
data: {
item: {
from:'',
to:''
},
},
mounted() {
$(".fleet-date").datepicker().on(
"changeDate", () => {
this.item.from = $('.fleet-date').val()
}
);
},
methods: {
saveFleetJob() {
alert(JSON.stringify(this.item));
},
}
})
js fiddle demo link here
Any suggestions please?
As Sphinx pointed there is some context mess, but it's not the only issue.
See this updated fiddle: https://jsfiddle.net/pb91fk6o/
You have to add
elem.dispatchEvent(new Event('input'))
to make this work.
So mounted should look like:
mounted() {
$(".fleet-date")
.datepicker()
.on("changeDate", (e) => {
e.target.dispatchEvent(new Event('input'))
})
},
See this issue for more details: https://github.com/vuejs/vue/issues/2804