code-8
Reputation: 58662
Why does form always return invalid?
I prepopulated my edit form inputs based on API response
When I clicked on Continue, validate() will trigger.
validate() {
this.$refs.form.validate()
console.log('this.$refs.form.validate() == ', this.$refs.form.validate())
I have no idea why it kept returning false
As you can see, Name, Description, Timezone, Start Date, Start Time, End Date, End Time all are there provided. The form should be valid.
Codes
<template>
<v-container fluid class="my-1">
<Navbar />
<Breadcrumbs />
<v-row>
<v-col cols="12">
<v-card elevation="2">
<PanelHeader type="update" icon="campaign" title="Campaigns" />
<v-stepper v-model="e1" justify="center" elevation="0">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1"> Campaign </v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2"> Setup </v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3"> Finish </v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card class="mb-12" elevation="0">
<v-form ref="form" lazy-validation v-model="valid" id="form">
<v-row>
<v-card-text class="font-weight-bold">
Campaigns
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</template>
<span>Select marketing campaign type for Print Materials or Product Tags. Provide a name to identify the marketing campaign.</span>
</v-tooltip>
</v-card-text>
</v-row>
<v-row>
<v-col class="col-sm-2 col-lg-2 col-12">
<v-select disabled dense outlined :items="types" label="Type" v-model="form.values.type" :rules="form.rules.type"></v-select>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-text-field dense outlined v-model="form.values.name" :rules="form.rules.name" label="Name" required></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-textarea dense rows="1" outlined v-model="form.values.description" label="Description" required></v-textarea>
</v-col>
</v-row>
<v-row>
<v-card-text class="font-weight-bold"
>Schedule :
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</template>
<span>Set the time zone, start and end date for this campaign to be active.</span>
</v-tooltip>
</v-card-text>
<v-col cols="12" sm="6" md="4">
<v-select dense outlined :items="timezones" v-model="form.values.timezone" :rules="form.rules.timezone" label="Timezone" append-icon="lock_clock"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="2">
<v-menu v-model="form.values.startDateMenu" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense outlined v-model="form.values.startDate" :rules="form.rules.startDate" label="Start Date" append-icon="mdi-calendar" readonly v-bind="attrs" v-on="on"></v-text-field>
</template>
<v-date-picker v-model="form.values.startDate"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-menu ref="menu" v-model="startTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="form.values.startTime" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense v-model="form.values.startTime" label="Start Time" append-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" outlined></v-text-field>
</template>
<v-time-picker v-if="startTimeMenu" v-model="form.values.startTime" full-width @click:minute="$refs.menu.save(form.values.startTime)"></v-time-picker>
</v-menu>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="2">
<v-menu v-model="endDateMenu" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense outlined v-model="form.values.endDate" :rules="form.rules.endDate" :min="form.values.startDate" label="End Date" append-icon="mdi-calendar" readonly v-bind="attrs" v-on="on"></v-text-field>
</template>
<v-date-picker v-model="form.values.endDate"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-menu ref="menu" v-model="endTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="form.values.endTime" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense v-model="form.values.endTime" label="End Time" append-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" outlined></v-text-field>
</template>
<v-time-picker v-if="endTimeMenu" v-model="form.values.endTime" :min="form.values.startTime" full-width @click:minute="$refs.menu.save(form.values.endTime)"></v-time-picker>
</v-menu>
</v-col>
</v-row>
</v-form>
</v-card>
<v-btn color="primary" @click="validate()" :disabled="!valid"> Continue </v-btn>
<router-link :to="`/${segment1}`">
<v-btn text> Cancel </v-btn>
</router-link>
</v-stepper-content>
<v-stepper-content step="3"> </v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Navbar from '../../../components/Navbar'
import Breadcrumbs from '../../../components/Breadcrumbs'
import PanelHeader from '../../../components/PanelHeader'
import axios from 'axios'
import moment from 'moment-timezone'
export default {
components: {
Navbar,
Breadcrumbs,
PanelHeader
},
beforeMount() {},
computed: {
segment1: function () {
const firstSegment = new URL(window.location.href).pathname.split('/')[1]
return `${firstSegment}`
},
timeZone: function () {
console.log('timeZone')
}
},
beforeMount() {
this.getCampaign()
},
data() {
return {
campaign: {},
form: {
errors: {},
values: {
name: '',
type: '',
description: '',
timezone: '',
startDate: '',
endDate: '',
startTime: moment().format('HH:mm'),
endTime: '24:00',
urlType: 'Single',
url: 'https://',
attribute: '',
operator: '',
value: ''
},
rules: {
type: [(v) => !!v || 'Type is required'],
name: [(v) => !!v || 'Name is required'],
startDate: [(v) => !!v || 'Start Date is required'],
endDate: [(v) => !!v || 'End Date is required'],
timezone: [(v) => !!v || 'Timezone is required'],
startTime: [(v) => !!v || 'Start Time is required'],
endTime: [(v) => !!v || 'End Time is required'],
urlType: [(v) => !!v || 'URL Type is required'],
url: [(v) => !!v || 'URL is required'],
attribute: [(v) => !!v || 'Attribute is required'],
operator: [(v) => !!v || 'Operator is required'],
value: [(v) => !!v || 'Value is required']
}
},
e1: 1,
valid: false,
valid2: false,
types: ['Product', 'Marketing'],
operator: [],
operators: ['=', '!=', 'in', 'not in'],
value: [],
values: ['Italy', 'Finland', 'Norway'],
timezones: moment.tz.names(),
startDateMenu: false,
endDateMenu: false,
startTimeMenu: false,
endTimeMenu: false,
urlTypes: ['Single', 'Multiple'],
attributes: []
}
},
watch: {
'form.values.attribute'() {
this.operator = null
axios.defaults.headers['Content-Type'] = 'application/json'
let data = {
$root: 'vc_operator',
op: 'read',
brand: 'COLM',
selection: {
filters: [`id:${this.form.values.attribute}`]
},
_SESSION: localStorage.getItem('session')
}
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, data).then((response) => {
this.operators = response.data.operators
})
}
},
methods: {
getAllData(id) {
let myForm = document.getElementById(id)
console.log(
Array.from(myForm.elements).map((e) => {
return e.value
})
)
},
getCampaign() {
let filters = 'id:' + this.$route.params.id
let body = {
$root: 'vc_campaign',
op: 'read',
brand: 'COLM',
selection: {
filters: [filters]
},
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'applcation/json'
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body)
.then((response) => {
if (response.data.status == 0) {
this.campaign = response.data.campaigns[0]
this.form.values.name = this.campaign.name
this.form.values.description = this.campaign.description
this.form.values.timezone = this.campaign.time_zone
// console.log(this.campaign.start_date.split('T')[0])
// this.form.values.startDate = this.campaign.start_date.split("T");
this.form.values.startDate = this.campaign.start_date.split('T')[0]
this.form.values.endDate = this.campaign.end_date.split('T')[0]
this.form.values.startTime = this.campaign.start_date.split('T')[1]
this.form.values.endTime = this.campaign.end_date.split('T')[1]
} else {
alert(response.data.statustext)
reject(response.data.statustext)
}
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
},
validate() {
this.$refs.form.validate()
console.log('this.$refs.form.validate() == ', this.$refs.form.validate())
if (this.$refs.form.validate()) {
if (this.campaign.type_id == 2) {
let attributes = {
$root: 'vc_rule_attribute',
op: 'read',
brand: 'COLM',
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'applcation/json'
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, attributes).then((response) => {
this.attributes = response.data.rule_attributes
})
}
let data = {
name: this.form.values.name,
description: this.form.values.description,
start_date: this.startDateAndStartTime,
end_date: this.endDateAndEndTime,
time_zone: this.form.values.timezone,
priority: '100',
status_id: 1,
type_id: 1
}
console.log('data', data)
let body = {
$root: 'vc_campaign',
op: 'update',
brand: 'COLM',
campaigns: [data],
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'application/json'
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body).then((response) => {
// console.log(response.data.campaigns[0])
this.tmpCampaign = response.data.campaigns[0]
// console.info('here2', this.tmpCampaign)
let data = {
quantity: 1,
campaign_id: this.tmpCampaign.id,
name: this.form.values.name,
url: this.form.values.url
}
console.info('data =', data)
let body = {
$root: 'vc_standalone',
op: 'update',
brand: 'COLM',
label_headers: [data],
_SESSION: localStorage.getItem('session')
}
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body)
.then((response) => {
console.log(response.data.label_headers[0])
this.labelHeader = response.data.label_headers[0]
if (this.labelHeader.quantity == 1) {
//get-serial
let body = {
$root: 'get-serial',
_SESSION: localStorage.getItem('session'),
eid: 'COLM',
mdid: this.labelHeader.id,
symbology: 'QR',
version: '2Q',
encode: 'ascii',
format: 'PNG',
scale: 15.0,
bg: 'FFFFFFFF',
fg: '000000FF'
}
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body, { responseType: 'arraybuffer' })
.then((response) => {
console.log('get-serial', response.data)
const base64 = btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
this.qrCode = 'data:image/jpg;base64,' + base64
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
}
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
this.e1 = 2
// console.info('here', this.tmpCampaign)
})
} else {
console.error('error:', this.form.values)
}
}
}
}
</script>
<style></style>
How can I debug this further ?
Upvotes: 0
Views: 258
Answers (1)
Ananda Vj
Reputation: 181
In your Screenshot page, the type is not set. but the rules said type is required. Even if it's disabled it still need to fulfill the rules you set
Upvotes: 2
Related Questions
- Form validation in vue
- Vuetify form validate a custom component
- Vue: Input Form in a component doesn't return a value
- Why does this Vue 3 form validation script fail?
- Form submit doesn't work properly when form is filled
- Vue validation with Vuetify
- Vuetify form issues
- Server side form validation with vue.js and vuetify
- How to implement a simple form with validation in a Vue app (with Vuetify.js)?
- Submitting form in Vue.js with ajax with Vuetify and vee-validate