Form Validator with Accordion
Hello Syncfusion team,
I have a somewhat uncomfortable problem, I have an accordion (using HTML tags) and inside the content I created a form with four dropdownlist.
When I click submit with the empty dropdownlist the FormValidator doesn't work,
<ejs-accordion>
<div>
<div>
<div expanded="true">Movimento:</div>
</div>
<div>
<div>
<form class="flex justify-evenly" id="form-filter">
<div class="flex w-4/5">
<label class="form-group mx-3">
<ejs-dropdownlist
name="DropMes"
placeholder="Mês"
class="form-control"
v-model="filter.month"
:fields="fields"
:dataSource="months"
data-msg-containerid="errorMes"
required
>
</ejs-dropdownlist>
<div id="errorMes"></div>
</label>
<label class="form-group mx-3">
<ejs-dropdownlist
name="DropAno"
placeholder="Ano"
class="form-control"
v-model="filter.year"
:fields="fields"
:dataSource="years"
data-msg-containerid="errorAno"
required
>
</ejs-dropdownlist>
<div id="errorAno"></div>
</label>
<label class="form-group mx-3">
<ejs-dropdownlist
name="DropModelo"
placeholder="Modelo"
class="form-control"
v-model="filter.model"
:fields="fields"
:dataSource="models"
:change="setType"
data-msg-containerid="errorModelo"
required
>
</ejs-dropdownlist>
<div id="errorModelo"></div>
</label>
<label class="form-group mx-3">
<ejs-dropdownlist
name="DropTipo"
placeholder="Tipo"
class="form-control"
v-model="filter.type"
:index="typeIndex"
:fields="fields"
:dataSource="types"
:enabled="enabled"
data-msg-containerid="errorTipo"
required
>
</ejs-dropdownlist>
<div id="errorTipo"></div>
</label>
</div>
<ejs-button @click.native="filtrar" :isPrimary="true">
Filtrar
</ejs-button>
<ejs-button @click.native="download" cssClass="e-info">
Download
</ejs-button>
</form>
</div>
</div>
</div>
</ejs-accordion>
import { FormValidator } from "@syncfusion/ej2-vue-inputs";
this.formObj = new FormValidator("#form-filter", this.options);
options: {
customPlacement(inputElement, errorElement) {
inputElement = inputElement.closest(".form-group").querySelector('.error')
inputElement.parentElement.appendChild(errorElement);
},
rules: {
DropMes: { required: true },
DropAno: { required: true },
DropModelo: { required: true },
DropTipo: { required: true }
},
locale: "pt"
}
So I tried another way, using the <div formGroup = "form-filter"> tag and gave this other error
Attachment: Errors_ec874d9e.zip
SIGN IN To post a reply.
1 Reply
1 reply marked as answer
SK
Satheesh Kumar Balasubramanian
Syncfusion Team
April 8, 2021 05:17 PM UTC
Hi Ryan,
Greetings from Syncfusion Support..!
We have validated your reported query "Form Validator with Accordion" at our end and prepared sample based on your shared details to reproduce the reported issue. We can able to reproduce the reported issue. We suggest to you initialize FormValidator in Accordion expanding event to overcome the reported issue and for the same we have prepared sample for your reference which can be viewed from the following link.
Code Snippet:
|
<template>
<div id="app">
<ejs-accordion :expanding="expanding">
<div>
<div>
<div>Movimento:</div>
</div>
<div>
<div>
<form id="formId" @submit.prevent="validar()">
<div>
<label for="raza"> Raza 1</label>
<no-ssr>
<!-- BUSCA ESTE ERROR --> <ejs-dropdownlist
id="raza1"
name="raza1"
allowCustom="true"
:fields="campos"
:dataSource="listadoRaza"
></ejs-dropdownlist> </no-ssr
><br />
<div ref="razaError1" id="raza1error"></div>
</div>
<div>
<label for="raza"> Raza 2</label>
<no-ssr>
<!-- BUSCA ESTE ERROR --> <ejs-dropdownlist
id="raza2"
name="raza2"
allowCustom="true"
:fields="campos"
:dataSource="listadoRaza"
></ejs-dropdownlist> </no-ssr
><br />
<div ref="razaError2" id="raza2error"></div>
</div>
<div>
<label for="raza"> Raza 3</label>
<no-ssr>
<!-- BUSCA ESTE ERROR --> <ejs-dropdownlist
id="raza3"
name="raza3"
allowCustom="true"
:fields="campos"
:dataSource="listadoRaza"
></ejs-dropdownlist> </no-ssr
><br />
<div ref="razaError3" id="raza3error"></div>
</div>
<div>
<ejs-textbox
id="nombre"
name="nombre"
data-msg-containerid="nombreError"
></ejs-textbox>
<div id="nombreError"></div>
</div> <ejs-button cssClass="e-flat" isPrimary="true" type="submit"
>Enviar</ejs-button
>
</form>
</div>
</div>
</div>
</ejs-accordion>
</div>
</template> <script>
import Vue from "vue";
import { AccordionPlugin } from "@syncfusion/ej2-vue-navigations";
import { FormValidator } from "@syncfusion/ej2-vue-inputs";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { TextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; //TextBox
Vue.use(DropDownListPlugin);
Vue.use(AccordionPlugin);
Vue.use(ButtonPlugin);
Vue.use(TextBoxPlugin); export default {
name: "app",
data: function () {
return {
formObject: "",
campos: { text: "razNombre", value: "razNombre" },
listadoRaza: [
{ razCodigo: 1, razNombre: "MESTIZO", razActivo: "true" },
{ razCodigo: 2, razNombre: "BLANCO", razActivo: "true" },
{ razCodigo: 3, razNombre: "NEGRO", razActivo: "true" },
{ razCodigo: 4, razNombre: "CAUCASICO", razActivo: "true" },
{ razCodigo: 5, razNombre: "INDIGENA", razActivo: "true" },
{ razCodigo: 6, razNombre: "AFRO ECUATORIANO", razActivo: "true" },
{ razCodigo: 7, razNombre: "MULATO", razActivo: "true" },
{ razCodigo: 9, razNombre: "DESCONOCE", razActivo: "false" },
{ razCodigo: 8, razNombre: "MONTUBIO", razActivo: "true" },
],
sportsData: ["Badminton", "Cricket", "Football", "Golf", "Tennis"],
};
},
methods: {
onClick: function (event) {
alert("Hola");
},
validar: function (event) {
alert("estoy en validar");
let valido = this.formObject.validate();
alert(valido);
},
expanding: function (event) {
this.formObject = new FormValidator("#formId", {
rules: {
raza1: { required: [true, "Debe seleccionar una raza 1"] },
raza2: { required: [true, "Debe seleccionar una raza 2"] },
raza3: { required: [true, "Debe seleccionar una raza 3"] },
nombre: { required: [true, "Es requerido"] },
},
customPlacement: (inputElement, error) => {
document
.getElementById(inputElement.id.split("_")[0] + "error")
.appendChild(error);
},
});
},
},
};
</script>
<style> </style> |
Kindly try the above sample and get back to us, if you need further assistance.
Regards,
Satheesh Kumar B
Marked as answer
SIGN IN To post a reply.
