Topic: Validation not working

Tobias.Weber priority asked 1 year ago


I have copied the following code to my project: https://mdbootstrap.com/docs/vue/forms/validation/?#section-basic-example

I cannot provide a snippet. I get the error sandpack.mdbootstrap.com took too long to respond.

Expected behavior checkform will only be executed after validation is successful

Actual behavior checkform will be executed directly without any validation.

Resources (screenshots, code snippets etc.)

<script setup>
import { MDBRow, MDBCol, MDBInput, MDBCheckbox, MDBBtn } from 'mdb-vue-ui-kit'
import { ref } from 'vue'

const checkForm = (event) => {
    console.log('checkform')
    // event.target.classList.add('was-validated')
}
const input1 = ref('Mark')
const input2 = ref('Otto')
const input3 = ref('')
const input4 = ref('')
const input5 = ref('')
const checkbox1 = ref(false)
</script>

<template>
    <MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm">
        <MDBCol md="4">
            <MDBInput
                label="First name"
                v-model="input1"
                invalidFeedback="Please provide your first name"
                validFeedback="Looks good!"
                required />
        </MDBCol>
        <MDBCol md="4">
            <MDBInput
                label="Last name"
                v-model="input2"
                invalidFeedback="Please provide your last name"
                validFeedback="Looks good!"
                required />
        </MDBCol>
        <MDBCol md="4">
            <MDBInput
                inputGroup
                aria-label="Username"
                aria-describedby="basic-addon1"
                placeholder="Username"
                v-model="input3"
                invalidFeedback="Please choose a username."
                validFeedback="Looks good!"
                required>
                <template v-slot:prepend>
                    <span class="input-group-text" id="basic-addon1">@</span>
                </template></MDBInput
            >
        </MDBCol>
        <MDBCol md="6">
            <MDBInput
                label="City"
                v-model="input4"
                invalidFeedback="Please provide a valid city."
                validFeedback="Looks good!"
                required />
        </MDBCol>
        <MDBCol md="6">
            <MDBInput
                label="Zip"
                v-model="input5"
                invalidFeedback="Please provide a valid zip."
                validFeedback="Looks good!"
                required />
        </MDBCol>
        <MDBCol col="12">
            <MDBCheckbox
                label="Agree to terms and conditions"
                v-model="checkbox1"
                invalidFeedback="You must agree before submitting."
                validFeedback="Looks good!"
                required />
        </MDBCol>
        <MDBCol col="12">
            <MDBBtn color="primary" type="submit">Submit form</MDBBtn>
        </MDBCol>
    </MDBRow>
</template>

Bartosz Cylwik staff answered 1 year ago


Hello! We do not provide a method that would prevent from submitting when the validation fails. You would have to write it yourself, for example inside the checkForm method like bellow:

const checkForm = (event) => {
  event.target.classList.add("was-validated");
  if (
    !input1.value ||
    !input2.value ||
    !input3.value ||
    !input4.value ||
    !input5.value ||
    !checkbox1.value
  ) {
    return alert("provide necessary informations!");
  }
  alert("all good!");
};

, or you can use library like VeeValidate if you need more sophisticated validation in your application. We have prepared a tutorial how to integrate VeeValidate with our vue components:

https://mdbootstrap.com/docs/vue/getting-started/veevalidate/

Best Regards!


Bartosz Cylwik staff commented 1 year ago

Let us know if snippets are working for you now. Best Regards!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.2.0
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes