<template>
<div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" v-model="firstName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
</div>
<div class="form-group">
<label for="message">Type Your message</label>
<textarea class="form-control" v-model="message" rows="3"></textarea>
</div>
<div class="form-group form-check" v-for="number in numbers" :key="number">
<input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
<label class="form-check-label" >{{number.Broj}}</label>
</div>
<button type="submit" class="btn btn-primary" v-on:click="alert" #click="sendMessage">Send message</button>
</div>
</template>
<script>
import http from "../http-common.js";
import userServices from "../services/userServices.js";
export default {
data()
{
return {
firstName: null,
lastName: null,
message: null,
numbers: "",
checkedNumbers: [],
success: 'You have submitted form successfully'
};
},
methods:
{
async sendMessage()
{
await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
this.$data.firstName = "",
this.$data.lastName = "",
this.$data.checkedNumbers = [],
this.$data.message = "";
},
alert() {
alert(this.success)
if(event)
alert(event.target.tagName)
},
retrieveNumbers() {
userServices.getNumbers().then(response => {
this.numbers = response.data;
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
},
created() {
this.retrieveNumbers();
}
}
</script>
So I want to add the option of checking input fields when user clicks "Send Message" button. I tried some options but I faield at that. So please I would appretiate if someone would help me. I'm still learning.
I know I have to use v-if and create the method for checking the fields.
So if you would be most kind and help me solve this problem I would be really grateful.
Thank you dev, community <3
Can I please get a concrete answer. Because I'll learn in that way, so please without condescending and "no-answers"
You can do it manually :
<script>
import http from "../http-common.js";
import userServices from "../services/userServices.js";
export default {
data()
{
return {
firstName: null,
lastName: null,
message: null,
numbers: "",
checkedNumbers: [],
success: 'You have submitted form successfully'
};
},
methods:
{
async sendMessage()
{
if(!(this.firstName && this.lastName && this.numbers)) return;
await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
this.$data.firstName = "",
this.$data.lastName = "",
this.$data.checkedNumbers = [],
this.$data.message = "";
},
alert() {
alert(this.success)
if(event)
alert(event.target.tagName)
},
retrieveNumbers() {
userServices.getNumbers().then(response => {
this.numbers = response.data;
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
},
created() {
this.retrieveNumbers();
}
}
</script>
Or you can this usefull library
https://vuelidate.js.org/#sub-basic-form
You can simply define a method to check the fields and call that before the HTTP request in the sendMessage method.
You can initialize your data as an empty string "" and have a method like this:
validateForm() {
return this.firstName != "" && this.lastName != "" && this.message != ""
}
Update your sendMessage method to something like this:
async sendMessage() {
const isFormValid = this.validateForm()
if (isFormValid) {
await http.post(....)
...
}
}
Related
I'm new in vue, and I am trying to make a get request from a field that has a v-model="embed.url" after pasting the link. Event after paste works well but, I don't know how to reference to input with v-model="embed.url" and get the data.
When I try code below error appear:
[Vue warn]: Error in v-on handler: "ReferenceError: embed is not defined"
and
ReferenceError: "embed is not defined"
My vue code:
<script type="text/javascript">
axios.defaults.xsrfHeaderName = "X-CSRFToken";
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data () {
return {
embed: {
url: '',
title: '',
description: '',
type: '',
thumbnail_url: '',
html: '',
},
isPaste: false,
embedsinfo: [],
}
},
methods: {
formSubmit(e) {
e.preventDefault();
let currentObj = this;
axios.post('http://wegemoc.local:8000/recipes/recipe/embed/add/', {
url: this.url,
})
.then(function (response) {
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
},
paste() {
this.isPaste = true;
},
input() {
if (this.isPaste) {
axios.get('http://iframe.ly/api/oembed?url=' + embed.url + '&api_key=493c9ebbdfcbdac2a10d6b')
.then(response => (this.embedsinfo = response))
isPaste = false;
}
}
},
});
My form:
<div id="app">
!! embedsinfo.title !!
<form method="post" class="margin-bottom-25" #submit="formSubmit">
{% csrf_token %}
<div class="form-group">
<label for="formGroupExampleInput">Adres przepisu*</label>
<input type="url" class="form-control" placeholder="Url" #paste="paste" #input="input" v-model="embed.url">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Tytuł</label>
<input class="form-control" placeholder="Title" v-model="embed.title">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<input type="textarea" class="form-control" id="formGroupExampleInput2" placeholder="Description" v-model="embed.description">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Thumbnail_url</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Tthumbnail_url" v-model="embed.thumbnail_url">
</div>
<button type="submit" class="btn btn-success-gradiant">Dodaj link</button>
</form>
</div>
When you are not using Vue as Single Component files, your data property must be an object and not a function. Change your data property to an object and then give it a try.
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data: {
return {
embed: {
url: '',
...
};
},
...
Also you must access your data embed.url property using "this" like how you have referenced other properties in your code.
if (this.isPaste) {
axios.get('http://iframe.ly/api/oembed?url=' + this.embed.url + '&api_key=493c9ebbdfcbdac2a10d6b')
.then(response => (this.embedsinfo = response))
isPaste = false;
}
I have the following data in an application form component.
data() {
return {
manuallyEnterAddress: false,
currentAddress: "",
postcode: undefined,
postcode2: undefined,
address: {
county: "",
town: "",
addressLine1: "",
atAddressFrom: "",
atAddressTo: ""
},
}
}
Once the application for is completed the data will look similar to the code below.
data() {
return {
manuallyEnterAddress: true,
currentAddress: "Some House",
postcode: SK1MPS,
postcode2: SK5N0Q,
address: {
county: "Cheshire",
town: "Chester",
addressLine1: "Random street",
atAddressFrom: "01/01/91",
atAddressTo: "01/01/2010"
},
}
}
When the form has been completed the user needs a way to reset the application form, returning the the first stepper, with blank fields.
Manually writing each field to reset would be horrific as there's at least ten times the data.
I've tried forceUpdate as shown below with no success.
newApplication() {
$vm.forceUpdate()
}
Is there a way I could use the "newApplication" function to reset all of the data on the component?
In your case there is no need to re-render the vue Component, which is what forceUpdate() will be doing forcefully. I will suggest using an object for modeling your form, lets say, formModel. For Example:
Template:
<form id="app" #submit="checkForm" method="post" novalidate="true">
<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="formModel.name">
<label for="email">Email</label>
<input type="email" name="email" id="email" v-model="formModel.email">
<input type="submit" value="Submit">
</form>
<<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
JS:
let app = new Vue({
el: "#app",
data: {
errors: [],
formModel: {}
},
methods: {
checkForm: function(e) {
let self = this
self.errors = []
if (!self.formModel.name) {
self.errors.push("Name required.")
}
if (!self.formModel.email) {
self.errors.push("Email required.")
} else if (!self.validEmail(self.formModel.email)) {
self.errors.push("Valid email required.")
}
if (!self.errors.length) {
self.initializeForm()
};
e.preventDefault()
},
validEmail: function(email) {
let re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/
return re.test(email)
},
initializeForm(){
self.formModel = {}
}
}
});
In this manner no matter how many input elements you have in your component you will just need to set the main model object.
below is HTML code for form
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control"
(blur)="suggestEmail(signupForm.controls['userData'].controls.email.value)"
id="email" formControlName="email">
<span class="help-block" *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched">
please enter a valid email id
</span>
</div>
Below is ts code
constructor(private fb: FormBuilder) {
this.signupForm = this.fb.group({
userData: this.fb.group({
email: [null, [Validators.required, Validators.email]]
})
});
}
ngOnInit() {
}
suggestEmail(email) {
Mailcheck.run({
email: email,
domains: ['gmail.com', 'aol.com', 'hotmail.com', 'yahoo.com', 'rediffmail.com', 'edu', 'msn.com',],
secondLevelDomains: ['domain', 'hotmail'],
topLevelDomains: ["com", "net", "org", "info"],
suggested: function (suggestion) {
console.log(suggestion);
if (suggestion) {
alert(suggestion.full);
console.log(suggestion.full + "dkdjdekjekde")
}
},
empty: function () {
}
});
}
Right now, value of suggestions.full comes in alert if its being called. But I am trying to show suggestions.full in html side, like as a error warning.
Below is link to my stackblitz
stackblitz
To avoid potential problems with access to this within the Mailcheck.run suggested callback, you could save the results of Mailcheck.run, check them and, if appropriate, set an error on your form field.
let check = Mailcheck.run({
email: email,
... other stuff ...
suggested: (suggestion) => {
return suggestion;
},
empty: () => {
return false; // or however you want to handle it...
}
if (check && check.full) {
this.suggestedEmail = check.full;
this.signupForm.get('userData.email').setErrors({ 'has_suggestion': true })
}
// then in your template (using a getter)
<span class="help-block"
*ngIf="f.invalid && f.touched && f.errors?.has_suggestion">
Suggestion: {{suggestedEmail}}
</span>
Please find this stackblitz -- hope it helps!
Instead of using a regular function which will be lost this scope whereas arrow function keeps track of this. Read more about the difference here https://stackoverflow.com/a/34361380/5836034
do something like this
....
suggestion: any;
....
suggestEmail(email) {
Mailcheck.run({
email: email,
domains: ['gmail.com', 'aol.com', 'hotmail.com', 'yahoo.com', 'rediffmail.com', 'edu', 'msn.com',],
secondLevelDomains: ['domain', 'hotmail'],
topLevelDomains: ["com", "net", "org", "info"],
suggested: (suggestion) => {
console.log(suggestion);
if (suggestion) {
alert(suggestion.full);
this.suggestion = suggestion;
console.log(suggestion.full + "dkdjdekjekde")
}
},
empty: function () {
}
});
}
Observe the use of arrow function, to keep track of this scope and also, assigning the value of suggestion to your class variable via
this.suggestion = suggestion
in your template, you can now have access to suggestion like so
<div *ngIf="suggestion">{{suggestion.full}} </div>
Source: https://stackblitz.com/edit/angular-email-checker-bjcrcc
I'm trying to use Vee Validate to require either of two input fields, name OR location, but they cannot both be empty. I am getting this error- 'Error in directive validate bind hook: "TypeError: Cannot read property 'expression' of undefined"' Here's what I have-
HTML
<div class="col-xs-12 col-sm-8">
<div class="same-height-parent">
<div class="same-height" :class="{'has-error': errors.has('searchLocation') }">
<input type="text" class="form-control" placeholder="Enter Zip or City, ST" v-model="searchLocation" v-validate ="{ rules: { required: this.locationInput} }" data-vv-name="searchLocation" >
</div>
<div class="form-element same-height">or</div>
<div class="same-height" :class="{'has-error': errors.has('searchName') }">
<input type="text" class="form-control" placeholder="Enter Name" v-model="searchName" v-validate ="{ rules: { required: nameInput} }" data-vv-name="searchName">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<button class="btn btn-success btn-block btn-fz20"
#click="validateBeforeSubmit()">Search</button>
</div>
JS
export default {
name: 'startNewSearch',
data: function() {
return {
sectionTitle: 'Start a New Search',
sectionClass: 'search',
searchLocation: '',
searchName: '',
searchType: 'location'
}
},
methods: {
validateBeforeSubmit: function(e) {
this.$validator.validateAll();
if (!this.errors.any()) {
this.submit()
}
},
submit: function(e) {}
}
},
computed: {
locationInput() {
if(this.searchName === '') {
return true;
}
return false;
},
nameInput() {
if(this.searchLocation === '')
return true; // cellphone is required
return false;
}
}
}
This is an old question, but I came across it while looking for a similar problem.
Anyhow, I believe you have a syntax error.
v-validate ="{ rules: { required: nameInput} }"
...you're missing 'this'...
v-validate ="{ rules: { required: this.nameInput} }"
Regards,
Wayne
In vee-validate v3 my solution was to extend the require_if rule like this:
app.html:
...
<ValidationProvider name="lastName" immediate rules="required_if_not:company" v-slot="{ errors }">
...
app.js:
extend('required_if_not', {
...required_if,
// params: ['target']
validate: (value, args) => {
let target_value = args.target;
return Boolean(target_value || value);
},
message: 'Bitte dieses Feld ausfüllen.'
});
this also works with multiple fields.
I am using VueJS with vue-validator and I have been struggling for hours to do simple conditional validation. The example provided in the documentation does not seem to work, at least not in my case.
What I am trying to accomplish is requiring two input groups (observer_firstName and observer_lastName) if a condition (showObserverEntry) is true and requiring another (role) if it is false.
So, if showObserverEntry is false, role should be required/visible. If showObserverEntry is true, role SHOULD NOT be required or visible, observer_firstName and observer_lastName should be required and visible.
Everything works when the page is loaded and showObserverEntry is set to false, it continues to work when switched to true, but when it goes back to false again validation stops working for role. Peeking at the data output, the validation data changes to validation { } where it initially has data.
Vue instance with other methods removed:
var vm = new Vue({
el: "#scheduleContainer",
validator: {
validates: {
requiredIf: function (val, condition){
return val && condition
}
}
},
data: {
loading: true,
stationId: stationId,
date: initialDate,
dateFormatted: initialDateFormatted,
nextDate: null,
prevDate: null,
entries: [],
requestEntries: [],
roles: [],
roleStaff: [],
showObserverEntry: false,
startPickerDatetime: null,
endPickerDatetime: null,
shiftEntry: {
start: null,
end: null,
role: null,
member: "",
observer: {
firstName: "",
lastName: ""
}
}
},
computed: {
validField: function () {
return this.validation.shiftEntry.observer.firstName.valid &&
this.validation.shiftEntry.observer.lastName.valid
}
},
methods: {
getRoleStaff: function () {
if (this.shiftEntry.role != '' && this.shiftEntry.role != 'observer') {
this.$http.post('/members/schedule/manage/json/roles/staff', {id: this.shiftEntry.role})
.success(function (data) {
this.$set('roleStaff', data.members);
vm.shiftEntry.member = "";
vm.showObserverEntry = false;
vm.shiftEntry.observer.firstName = "";
vm.shiftEntry.observer.lastName = "";
});
} else if (this.shiftEntry.role == 'observer') {
this.showObserverEntry = true;
this.resetFields()
}
else {
this.showObserverEntry = false;
this.roleStaff = [];
}
},
resetFields: function () {
this.roleStaff = [];
this.shiftEntry.role = "";
this.shiftEntry.member = "";
this.shiftEntry.observer.firstName = "";
this.shiftEntry.observer.lastName = "";
},
conditionalField: function (response, type) {
return response === type
}
}
});
Form fields:
<div class="form-group"
v-if="conditionalField(showObserverEntry, false)"
v-class="has-error: validation.shiftEntry.member.invalid">
<label for="member">Member:</label>
<select name="member"
id="member"
v-model="shiftEntry.member"
options="roleStaff"
v-attr="disabled: !roleStaff.length"
class="form-control"
v-validate="requiredIf: conditionalField(showObserverEntry, false)">
<option value="">Select Member</option>
</select>
</div>
<div class="form-group"
v-if="conditionalField(showObserverEntry, true)"
v-class="has-error: validation.shiftEntry.observer.firstName.invalid">
<label for="observer_firstName">First Name:</label>
<input type="text"
id="observer_firstName"
class="form-control"
v-model="shiftEntry.observer.firstName"
v-validate="requiredIf: conditionalField(showObserverEntry, true)">
</div>
<div class="form-group"
v-if="conditionalField(showObserverEntry, true)"
v-class="has-error: validation.shiftEntry.observer.lastName.invalid">
<label for="observer_lastName">Last Name:</label>
<input type="text"
id="observer_lastName"
class="form-control"
v-model="shiftEntry.observer.lastName"
v-validate="requiredIf: conditionalField(showObserverEntry, true)">
</div>
It is because a bug in Vue.js. Reason: If we remove one or more v-model based on certain condition(v-if), then it will make all other validation to deactivate.
Refer the issue :https://github.com/vuejs/vue-validator/issues/69