A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/commit/aca4a5c8f9a9ed0d7526de396ff072f0c1f4ebdf below:

improve form validation examples (#4584) · bootstrap-vue/bootstrap-vue@aca4a5c · GitHub

@@ -18,87 +18,17 @@ This is a verbose example designed to show how BootstrapVue and Vuelidate intera

 18 18

applications, you'd likely want to abstract some of the functionality, such as creating a standard

 19 19

error message component.

 20 20 21 -

```html

 22 -

<template>

 23 -

<div>

 24 -

<b-form @submit.stop.prevent="onSubmit">

 25 -

<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">

 26 -

<b-form-input

 27 -

id="example-input-1"

 28 -

name="example-input-1"

 29 -

v-model="$v.form.name.$model"

 30 -

:state="$v.form.name.$dirty ? !$v.form.name.$error : null"

 31 -

aria-describedby="input-1-live-feedback"

 32 -

></b-form-input>

 33 - 34 -

<b-form-invalid-feedback id="input-1-live-feedback">

 35 -

This is a required field and must be at least 3 characters.

 36 -

</b-form-invalid-feedback>

 37 -

</b-form-group>

 38 - 39 -

<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">

 40 -

<b-form-select

 41 -

id="example-input-2"

 42 -

name="example-input-2"

 43 -

v-model="$v.form.food.$model"

 44 -

:options="foods"

 45 -

:state="$v.form.food.$dirty ? !$v.form.food.$error : null"

 46 -

aria-describedby="input-2-live-feedback"

 47 -

></b-form-select>

 48 - 49 -

<b-form-invalid-feedback id="input-2-live-feedback">

 50 -

This is a required field.

 51 -

</b-form-invalid-feedback>

 52 -

</b-form-group>

 53 - 54 -

<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>

 55 -

</b-form>

 56 -

</div>

 57 -

</template>

 58 - 59 -

<script>

 60 -

import { validationMixin } from 'vuelidate'

 61 -

import { required, minLength } from 'vuelidate/lib/validators'

 62 - 63 -

export default {

 64 -

mixins: [validationMixin],

 65 -

data() {

 66 -

return {

 67 -

foods: ['apple', 'orange'],

 68 -

form: {

 69 -

name: null,

 70 -

food: null

 71 -

}

 72 -

}

 73 -

},

 74 -

validations: {

 75 -

form: {

 76 -

food: {

 77 -

required

 78 -

},

 79 -

name: {

 80 -

required,

 81 -

minLength: minLength(3)

 82 -

}

 83 -

}

 84 -

},

 85 -

methods: {

 86 -

onSubmit() {

 87 -

this.$v.form.$touch()

 88 -

if (this.$v.form.$anyError) {

 89 -

return

 90 -

}

 91 - 92 -

// Form submit logic

 93 -

}

 94 -

}

 95 -

}

 96 -

</script>

 97 -

```

 21 +

<iframe

 22 +

src="https://codesandbox.io/embed/inspiring-haslett-lzq6p?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"

 23 +

style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"

 24 +

title="BootstrapVue Vuelidate example"

 25 +

allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"

 26 +

sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

 27 +

></iframe>

 98 28 99 -

## VeeValidate

 29 +

## VeeValidate v2

 100 30 101 -

[VeeValidate](https://logaretm.github.io/vee-validate/) is a plugin for Vue.js that allows you to

 31 +

[VeeValidate](http://vee-validate.logaretm.com/v2/) is a plugin for Vue.js that allows you to

 102 32

validate input fields and display errors. It has full support for

 103 33

[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error

 104 34

messages.

@@ -122,81 +52,29 @@ Vue.use(VeeValidate, {

 122 52

})

 123 53

```

 124 54 125 -

### VeeValidate example

 126 - 127 -

Same example as above, just modified for VeeValidate:

 128 - 129 -

```html

 130 -

<template>

 131 -

<div>

 132 -

<b-form @submit.stop.prevent="onSubmit">

 133 -

<b-form-group id="example-input-group-1" label="Name" label-for="example-input-1">

 134 -

<b-form-input

 135 -

id="example-input-1"

 136 -

name="example-input-1"

 137 -

v-model="form.name"

 138 -

v-validate="{ required: true, min: 3 }"

 139 -

:state="validateState('example-input-1')"

 140 -

aria-describedby="input-1-live-feedback"

 141 -

></b-form-input>

 142 - 143 -

<b-form-invalid-feedback id="input-1-live-feedback">

 144 -

This is a required field and must be at least 3 characters.

 145 -

</b-form-invalid-feedback>

 146 -

</b-form-group>

 147 - 148 -

<b-form-group id="example-input-group-2" label="Food" label-for="example-input-2">

 149 -

<b-form-select

 150 -

id="example-input-2"

 151 -

name="example-input-2"

 152 -

v-model="form.food"

 153 -

v-validate="{ required: true }"

 154 -

:options="foods"

 155 -

:state="validateState('example-input-2')"

 156 -

aria-describedby="input-2-live-feedback"

 157 -

></b-form-select>

 158 - 159 -

<b-form-invalid-feedback id="input-2-live-feedback">

 160 -

This is a required field.

 161 -

</b-form-invalid-feedback>

 162 -

</b-form-group>

 163 - 164 -

<b-button type="submit" variant="primary" :disabled="veeErrors.any()">Submit</b-button>

 165 -

</b-form>

 166 -

</div>

 167 -

</template>

 168 - 169 -

<script>

 170 -

export default {

 171 -

data() {

 172 -

return {

 173 -

foods: ['apple', 'orange'],

 174 -

form: {

 175 -

name: null,

 176 -

food: null

 177 -

}

 178 -

}

 179 -

},

 180 -

methods: {

 181 -

validateState(ref) {

 182 -

if (

 183 -

this.veeFields[ref] &&

 184 -

(this.veeFields[ref].dirty || this.veeFields[ref].validated)

 185 -

) {

 186 -

return !this.veeErrors.has(ref)

 187 -

}

 188 -

return null

 189 -

},

 190 -

onSubmit() {

 191 -

this.$validator.validateAll().then((result) => {

 192 -

if (!result) {

 193 -

return

 194 -

}

 195 - 196 -

// Form submit logic

 197 -

})

 198 -

}

 199 -

}

 200 -

}

 201 -

</script>

 202 -

```

 55 +

### VeeValidate v2 example

 56 + 57 +

<iframe

 58 +

src="https://codesandbox.io/embed/vigilant-kirch-8lpns?fontsize=14&hidenavigation=1&module=%2FApp.vue"

 59 +

style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"

 60 +

title="BoostrapVue VeeValidate v2 example"

 61 +

allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"

 62 +

sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

 63 +

></iframe>

 64 + 65 +

## VeeValidate v3

 66 + 67 +

[VeeValidate](http://vee-validate.logaretm.com/) is a plugin for Vue.js that allows you to validate

 68 +

input fields and display errors. It has full support for

 69 +

[Vue I18n](https://kazupon.github.io/vue-i18n/) and provides fairly good out of the box error

 70 +

messages.

 71 + 72 +

### VeeValidate v3 example

 73 + 74 +

<iframe

 75 +

src="https://codesandbox.io/embed/boostrapvue-veevalidate-v3-example-xm3et?fontsize=14&hidenavigation=1&module=%2FApp.vue&theme=dark"

 76 +

style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"

 77 +

title="BoostrapVue VeeValidate v3 example"

 78 +

allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"

 79 +

sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

 80 +

></iframe>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4