new Vue({
el: '#app',
data: {
terms: false,
fullname: false,
mobile: false,
area: false,
city: false,
},
computed: {
isDisabled: function(){
return !this.terms && !this.fullname && !this.mobile && !this.area && !this.city;
}
}
})
<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
<input id="fullname" type='text' v-modal='fullname'/> name
<input id="mobile" type='text' v-modal='mobile'/> mobile
<input id="area" type='text' v-modal='area'/> area
<input id="city" type='text' v-modal='city'/> city
</label>
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
Until user fill all the details, button should be disabled.
But Issue with this is if i click on checkbox directly button is enabling without checking for other fields
There are many problems in your code and i will list them one by one.
data property should be a function.
fullname , mobile , ... are bound to input type="text" so empty string is better for initial value.
there are typos in your v-modal
there is a mistake in your logical formula for isDisabled
so the final code should be like this:
new Vue({
el: '#app',
data() {
return {
terms: false,
fullname:'',
mobile: '',
area: '',
city: '',
};
},
computed: {
isDisabled: function(){
return !this.terms || !this.fullname || !this.mobile || !this.area || !this.city;
}
}
})
<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
<input id="fullname" type='text' v-model='fullname'/> name
<input id="mobile" type='text' v-model='mobile'/> mobile
<input id="area" type='text' v-model='area'/> area
<input id="city" type='text' v-model='city'/> city
</label>
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
I highly recommend you to use IDE or eslint.
Related
I have 2 views for adding data to a database, one for songs and one for genres. However, I want to populate the input fields with random data, but I don't know why importing chance in genres, but not in songs, makes songs working, but not genres page.
Genre View:
<template>
<div>
<input type="text" id="genre-name" placeholder="Name" v-model="name" /><br />
<input type="text" id="genre-country" placeholder="Country" v-model="country" /><br />
<input type="text" id="genre-year" placeholder="Year" v-model="year" /><br />
<button #click="addGenre" id="genre-button">Add Genre</button>
</div>
</template>
<script>
import { requestOptions, base_url } from '#/utils/requestOptions';
//var chance = require('chance').Chance(); this works for both, when importing only in one file
import {chance} from "chance"; //<= this is the line I am talking about
export default {
data() {
return {
name: chance.radio(),
country: chance.country({ full: true }),
year: chance.year()
}
},
methods: {
addGenre() {
//...
}
}
}
</script>
Song View:
<template>
<div>
<input type="text" id="name" placeholder="Name" v-model="name" /><br />
<input type="text" id="author" placeholder="Author" v-model="author" /><br />
<input type="text" id="country" placeholder="Country" v-model="country" /><br />
<input type="text" id="duration" placeholder="Duration" v-model="duration" /><br />
<input type="text" id="views" placeholder="Views" v-model="views" /><br />
<input type="text" id="genre" placeholder="Genre" v-model="genre" /><br />
<button #click="addSong">Add Song</button>
</div>
</template>
<script>
import { requestOptions, base_url } from '#/utils/requestOptions';
//this is working without importing chance
export default {
data() {
return {
name: chance.word(),
author: chance.last(),
country: chance.country({ full: true }),
duration: chance.minute(),
views: chance.integer({ min: 0, max: 100000000 }),
genre: chance.radio()
}
},
methods: {
addSong() {
//...
}
}
}
</script>
The error message I am getting when I am opening the Genre View is:
TypeError: undefined is not an object (evaluating 'chance__WEBPACK_IMPORTED_MODULE_1__.chance.radio')
So I want to know why is it working on the Song View?
If I delete the import line, it will not work in any view.
I'm new to Vue.js and I'd like to check if passwords are matched.
If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear.
I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure vue.js?
https://jsfiddle.net/Babrz/L2md63j7/3/
<div id="app">
<form >
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<br>
<div class="form-group">
<input type="password" class="form-control" v-model="password" placeholder="Password">
</div>
<br>
<div class="form-group">
<input type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
</div>
<small v-if="showError">Passwords don't match!</small>
<br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Age">
</div>
<br>
<button type="submit" class="btn login-btn">Register</button>
</form>
</div>
new Vue({
el: "#app",
data: {
email: '',
password: '',
password2: '',
age: 0,
showError: false
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
It sounds like you want to use an onblur event to run a validation on the two password values. A very basic implementation might look like this.
...
<input v-on:blur="validate" type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
...
...
new Vue({
el: "#app",
data: {
email: '',
password: '',
password2: '',
age: 0,
showError: false
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
validate: function() {
console.log(this.password === this.password2)
}
}
})
...
https://v2.vuejs.org/v2/guide/events.html
You can get a lot of help if you use something like validate.js to validate your passwords too.
http://validatejs.org
I can't get this to work, it will not console.log(this.stat.first_name) , I need to know how to access the input form values that are entered so I can change state and then make an axios post request in the postSubmit function. I am doing the console.log first to test it and get data movement correct.
Anything will help.
First question was deleted, this is a repost as I did not figure the problem out.
class {
onCreate() {
this.state = {
first_name: null,
last_name: null,
email: null,
address: null,
phone_number: null,
email_promotion_optin: false
};
}
postSubmit(event) {
event.preventDefault();
this.state.first_name = event.target.name.first_name;
console.log(this.state.first_name);
}
}
<form on-click('postSubmit')>
<fieldset>
<legend> Create Customer</legend>
<div>
<label>
First Name: <input type="text" name="first_name">
</label>
</div>
<div>
<label>
Last Name: <input type="text" name="last_name">
</label>
</div>
<div>
<label>
Email: <input type="text" name="email">
</label>
</div>
<div>
<label>
Address: <input type="text" name="address">
</label>
</div>
<div>
<label>
Phone Number: <input type="text" name="phone_number">
</label>
</div>
<div>
<label>
Submit <input type="submit">
</label>
</div>
</fieldset>
</form>
UPDATE!!!!!!:
I have come up with this from MarkoJS documentation, but still no luck. I may be on the right route or I may be polluting my code with a lot of unnecessary crap.
$ const axios = require('axios');
class {
onCreate() {
this.state = {
first_name: '',
last_name: '',
email: '',
address: '',
phone_number: '',
email_promotion_optin: false
};
}
onFirstNameInput () {
this.state.first_name = this.getEl('firstName').value;
}
onLastNameInput () {
this.state.last_name = this.getEl('lastName').value;
}
onEmailInput () {
this.state.email = this.getEl('email').value;
}
onAddressInput () {
this.state.address = this.getEl('address').value;
}
onPhoneNumberInput () {
this.state.phone_number = this.getEl('phoneNumber').value;
}
postSubmit() {
axios.post('/api/v1/customers', this.state)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
<form>
<fieldset>
<legend> Create Customer</legend>
<div>
<label>
First Name: <input type="text" key="firstName" on-input('onFirstNameInput')>
</label>
</div>
<div>
<label>
Last Name: <input type="text" key="last_name" on-input('oneLastNameInput')>
</label>
</div>
<div>
<label>
Email: <input type="text" key="email" on-input('onEmailInput')>
</label>
</div>
<div>
<label>
Address: <input type="text" key="address" on-input('onAddressInput')>
</label>
</div>
<div>
<label>
Phone Number: <input type="text" key="phone_number" on-input('onPhoneNumberInput')>
</label>
</div>
</fieldset>
<div>
<button on-click('postSubmit')>Submit</button>
</div>
</form>
I looked into the issue. The reason that the code is not working as expected is that the properties on the this.state object are not defined as enumerable. MarkoJS uses Object.defineProperty to create getters and setters for the state properties, but it is not explicitly setting the enumerable property to true so it is defaulting to false. I think we should fix this and opened up a GitHub issue to discuss: https://github.com/marko-js/marko/issues/964
In the meantime, I recommend the following workaround to explicitly copy over the properties that should be submitted with the HTTP post:
postSubmit() {
var request = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
address: this.state.address,
phone_number: this.state.phone_number,
email_promotion_optin: this.state.email_promotion_optin
}
axios.post('/api/v1/customers', request)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
I have an input in a Vue.js component that I need to override using jquery. I need to fill an input with an email address using jquery. When I press fill in email jQuery will populate the email input. But when I use V-model this it is not updated. Is there a workaround for this?
Here is a working jsfiddle example
https://jsfiddle.net/s3b7f1ah/
Here is the HTML
<button id="push-email">Fill in email</button>
<br><br>
<div id="root">
<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name">
<label for="name">Email</label>
<input type="text" name="email" id="email" v-model="email">
<br><br>
<button #click="proceed">next</button>
<br><br>
{{ name }} <br>
{{ email }}
</div>
Here is the jQuery
//jQuery
$(function() {
$('#push-email').click(function() {
$('#email').val("john#example.com");
});
});
And here is the vue component
//Vue
var app = new Vue({
el: '#root',
data: {
name: '',
email: '',
},
methods: {
proceed: function () {
}
},
});
https://jsfiddle.net/s3b7f1ah/
The best way if you really are stuck would be to add an event listener in your vue model:
var app = new Vue({
el: '#root',
data: {
name: '',
email: '',
},
methods: {
proceed: function () {
},
foo : function(event){
this.email = event.target.value;
}
},
});
<input #change="foo" type="text" name="email" id="email" v-model="email">
This way, you don't have to modify the jQuery logic.
Updated jsfiddle: https://jsfiddle.net/s3b7f1ah/1/
Change you jquery code to set the model value instead and it will get reflected in the input field.
//jQuery
$(function() {
$('#push-email').click(function() {
app.email = 'john#example.com';
});
});
You could write a directive to handle the jQuery change (as long as jQuery issues one). If jQuery just sets the value without triggering a change event, you'll never see it. Borrowing code from Axnyff:
//Vue
var app = new Vue({
el: '#root',
data: {
name: '',
email: '',
},
methods: {
proceed: function() {
},
foo: function(event) {
this.email = event.target.value;
}
},
directives: {
onJqueryChange: {
bind(el, binding) {
$(el).change(binding.value);
}
}
}
});
//Jquery
$(function() {
$('#push-email').click(function() {
$('#email').val("john#example.com").change();
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="push-email">Fill in email</button>
<br>
<br>
<div id="root">
<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name">
<label for="name">Email</label>
<input v-on-jquery-change="foo" type="text" name="email" id="email" v-model="email">
<br>
<br>
<button #click="proceed">next</button>
<br>
<br> {{ name }}
<br> {{ email }}
</div>
I need some inputs to be required only if certain options are checked in another input (radio). In short, if Type 1 documents is chosen, I need type 1 field number to be obligatory. It's easier to visualize through this jsfiddle below:
https://jsfiddle.net/kbhatd51/2/
Could you please help me? Thanks in advance
<form id="registerform" method="post">
<div class="form-group">
<label >Type of Document</label><br>
<input type="radio" class="radioForm" id="fis" name="tipop" value="0" > <label for="fis"> Type 1</label><br>
<input type="radio" class="radioForm" id="jur" name="tipop" value="1" > <label for="jur"> Type 2</label><br>
</div>
<label for="tipop"> Number</label>
<div class="form-group">
<fieldset id="cpf1">
<label for=cpf1>Type 1 No.:</label>
<input type="number" class="form-control" placeholder="000.000.000-00" name="cpf" id="cpf" >
</fieldset>
<fieldset id="cnpj1">
<label for=cnpj1> Type 2 No.:
<input type="number" class="form-control" placeholder=" 00.000.000/0001-00" name="cnpj" id="cnpj"></label>
</fieldset>
</div>
<input name="submit" type="submit" value="Submit!">
</form>
JS validate:
$("#registerform").validate({
rules: {
cpf: {
required: "#fis:checked"
},
cnpj: {
required: "#jur:checked"
}
}
});
The required method needs to return true for the field to be required.
So you can simply pass a function to required which will check if the radio element is checked
required method
required( dependency-callback )
Type: Function()
The function is executed with the element as it's only argument: If it returns true, the element is required.
$("#registerform").validate({
debug: true,
rules: {
cpf: {
required: function(elem) {
return $('#fis').is(":checked")
}
},
cnpj: {
required: function(elem) {
return $('#jur').is(":checked")
}
}
}
});
Check out the -- JSFiddle Example -- here.