Weird form validation

[zhaolinlau]

Overview of the problem

Buefy version: [0.1.2]
Vuejs version: [3.4.21]
OS/Browser: Windows 11/Firefox

Description

When I don't fill anything to a form and click submit button, it should directly show the validation message

Steps to reproduce

1. add a login form

<form @submit.prevent="login">

					<b-field label="Email">
						<b-input icon="email" type="email" v-model="email" required />
					</b-field>

					<b-field label="Password">
						<b-input icon="lock" type="password" minlength="6" password-reveal v-model="password" required />
					</b-field>

					<b-field class="has-text-right">
						<NuxtLink to="/forgot_password">Forgot password?</NuxtLink>
					</b-field>

					<b-field>
						<b-button rounded type="is-primary" :disabled="loggingIn" expanded :loading="loggingIn" label="Login"
							native-type="submit" />
					</b-field>

					<b-field>
						<b-button rounded type="is-link" expanded @click="navigateTo('/register')" label="Create account" />
					</b-field>
				</form>

2. Fill nothing
3. Click submit button

Expected behavior

Actual behavior

[zhaolinlau]

@kikuomax @wesdevpro any update?

[kikuomax]

@zhaolinlau Sorry for my late reply. Buefy does not automatically run validation on submit. For now, you have to manually call the checkHtml5Validity method of each input when the "submit" button is clicked. For instance:

<script setup lang="ts">
import { ref } from 'vue'

const email = ref('')
const password = ref('')
const loggingIn = ref(false)

const emailInput = ref()
const passwordInput = ref()

const onSubmit = () => {
    emailInput.value.checkHtml5Validity()
    passwordInput.value.checkHtml5Validity()
}
</script>

<template>
    <form @submit.prevent="login">

        <b-field label="Email">
            <b-input
                ref="emailInput"
                icon="email"
                type="email"
                v-model="email"
                required
            />
        </b-field>

        <b-field label="Password">
            <b-input
                ref="passwordInput"
                icon="lock"
                type="password"
                minlength="6"
                password-reveal
                v-model="password"
                required
            />
        </b-field>

        <b-field class="has-text-right">
            <NuxtLink to="/forgot_password">Forgot password?</NuxtLink>
        </b-field>

        <b-field>
            <b-button
                rounded
                type="is-primary"
                :disabled="loggingIn"
                expanded
                :loading="loggingIn"
                label="Login"
                native-type="submit"
                @click="onSubmit"
            />
        </b-field>

        <b-field>
            <b-button rounded type="is-link" expanded @click="navigateTo('/register')" label="Create account" />
        </b-field>
    </form>
</template>

[zhaolinlau]

@kikuomax alright thx! it would be great if it can be improved in the next release

[wesdevpro]

I have opened a discussion for your feature request #206