Skip to content

Commit cff451d

Browse files
mrholekmrholek
committed
docs: update validation examples
1 parent 9ea0fcc commit cff451d

File tree

1 file changed

+168
-135
lines changed

1 file changed

+168
-135
lines changed

‎packages/docs/forms/validation.md

Lines changed: 168 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -91,84 +91,105 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
9191
</CForm>
9292
:::
9393
```vue
94-
<CForm
95-
class="row g-3 needs-validation"
96-
novalidate
97-
:validated="validatedCustom01"
98-
@submit="handleSubmitCustom01"
99-
>
100-
<CCol md="4">
101-
<CFormInput
102-
feedbackValid="Looks good!"
103-
id="validationCustom01"
104-
label="First name"
105-
required
106-
value="Mark"
107-
/>
108-
</CCol>
109-
<CCol md="4">
110-
<CFormInput
111-
feedbackValid="Looks good!"
112-
id="validationCustom02"
113-
label="Email" value="Otto"
114-
required
115-
/>
116-
</CCol>
117-
<CCol md="4">
118-
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
119-
<CInputGroup class="has-validation">
120-
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
94+
<template>
95+
<CForm
96+
class="row g-3 needs-validation"
97+
novalidate
98+
:validated="validatedCustom01"
99+
@submit="handleSubmitCustom01"
100+
>
101+
<CCol md="4">
102+
<CFormInput
103+
feedbackValid="Looks good!"
104+
id="validationCustom01"
105+
label="First name"
106+
required
107+
value="Mark"
108+
/>
109+
</CCol>
110+
<CCol md="4">
121111
<CFormInput
122-
id="validationCustomUsername"
123-
aria-describedby="inputGroupPrepend"
124-
feedbackInvalid="Please choose a username."
112+
feedbackValid="Looks good!"
113+
id="validationCustom02"
114+
label="Email" value="Otto"
125115
required
126116
/>
127-
</CInputGroup>
128-
</CCol>
129-
<CCol md="6">
130-
<CFormInput
131-
feedbackInvalid="Please provide a valid city."
132-
id="validationCustom03"
133-
label="City"
134-
required
135-
/>
136-
</CCol>
137-
<CCol md="3">
138-
<CFormSelect
139-
aria-describedby="validationCustom04Feedback"
140-
feedbackInvalid="Please select a valid state."
141-
id="validationCustom04"
142-
label="State"
143-
required
144-
>
145-
<option selected="" disabled="" value="">
146-
Choose...
147-
</option>
148-
<option>...</option>
149-
</CFormSelect>
150-
</CCol>
151-
<CCol md="3">
152-
<CFormInput
153-
feedbackInvalid="Please provide a valid zip."
154-
id="validationCustom05"
155-
label="Zip"
156-
required
157-
/>
158-
</CCol>
159-
<CCol xs="12">
160-
<CFormCheck
161-
feedbackInvalid="You must agree before submitting."
162-
id="invalidCheck"
163-
label="Agree to terms and conditions"
164-
required
165-
type="checkbox"
166-
/>
167-
</CCol>
168-
<CCol xs="12">
169-
<CButton color="primary" type="submit">Submit form</CButton>
170-
</CCol>
171-
</CForm>
117+
</CCol>
118+
<CCol md="4">
119+
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
120+
<CInputGroup class="has-validation">
121+
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
122+
<CFormInput
123+
id="validationCustomUsername"
124+
aria-describedby="inputGroupPrepend"
125+
feedbackInvalid="Please choose a username."
126+
required
127+
/>
128+
</CInputGroup>
129+
</CCol>
130+
<CCol md="6">
131+
<CFormInput
132+
feedbackInvalid="Please provide a valid city."
133+
id="validationCustom03"
134+
label="City"
135+
required
136+
/>
137+
</CCol>
138+
<CCol md="3">
139+
<CFormSelect
140+
aria-describedby="validationCustom04Feedback"
141+
feedbackInvalid="Please select a valid state."
142+
id="validationCustom04"
143+
label="State"
144+
required
145+
>
146+
<option selected="" disabled="" value="">
147+
Choose...
148+
</option>
149+
<option>...</option>
150+
</CFormSelect>
151+
</CCol>
152+
<CCol md="3">
153+
<CFormInput
154+
feedbackInvalid="Please provide a valid zip."
155+
id="validationCustom05"
156+
label="Zip"
157+
required
158+
/>
159+
</CCol>
160+
<CCol xs="12">
161+
<CFormCheck
162+
feedbackInvalid="You must agree before submitting."
163+
id="invalidCheck"
164+
label="Agree to terms and conditions"
165+
required
166+
type="checkbox"
167+
/>
168+
</CCol>
169+
<CCol xs="12">
170+
<CButton color="primary" type="submit">Submit form</CButton>
171+
</CCol>
172+
</CForm>
173+
</template>
174+
<script>
175+
export default {
176+
data: () => {
177+
return {
178+
validatedCustom01: null,
179+
}
180+
},
181+
methods: {
182+
handleSubmitCustom01(event) {
183+
const form = event.currentTarget
184+
if (form.checkValidity() === false) {
185+
event.preventDefault()
186+
event.stopPropagation()
187+
}
188+
this.validatedCustom01 = true
189+
},
190+
}
191+
}
192+
</script>
172193
```
173194

174195
## Browser defaults
@@ -707,86 +728,98 @@ If your form layout allows it, you can swap the text for the tooltip to display
707728
</CForm>
708729
:::
709730
```vue
710-
<CForm class="row g-3 needs-validation" novalidate :validated="validatedTooltip01" @submit="handleSubmitTooltip01">
711-
<CCol md="4" class="position-relative">
712-
<CFormLabel for="validationTooltip01">Email</CFormLabel>
713-
<CFormInput id="validationTooltip01" value="Mark" required/>
714-
<CFormFeedback tooltip valid>
715-
Looks good!
716-
</CFormFeedback>
717-
</CCol>
718-
<CCol md="4" class="position-relative">
719-
<CFormLabel for="validationTooltip02">Email</CFormLabel>
720-
<CFormInput id="validationTooltip02" value="Otto" required/>
721-
<CFormFeedback tooltip valid>
722-
Looks good!
723-
</CFormFeedback>
724-
</CCol>
725-
<CCol md="4" class="position-relative">
726-
<CFormLabel for="validationTooltipUsername">Username</CFormLabel>
727-
<CInputGroup class="has-validation">
728-
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
729-
<CFormInput id="validationTooltipUsername" value="" aria-describedby="inputGroupPrepend" required/>
731+
<template>
732+
<CForm class="row g-3 needs-validation" novalidate :validated="validatedTooltip01" @submit="handleSubmitTooltip01">
733+
<CCol md="4" class="position-relative">
734+
<CFormLabel for="validationTooltip01">Email</CFormLabel>
735+
<CFormInput id="validationTooltip01" value="Mark" required/>
736+
<CFormFeedback tooltip valid>
737+
Looks good!
738+
</CFormFeedback>
739+
</CCol>
740+
<CCol md="4" class="position-relative">
741+
<CFormLabel for="validationTooltip02">Email</CFormLabel>
742+
<CFormInput id="validationTooltip02" value="Otto" required/>
743+
<CFormFeedback tooltip valid>
744+
Looks good!
745+
</CFormFeedback>
746+
</CCol>
747+
<CCol md="4" class="position-relative">
748+
<CFormLabel for="validationTooltipUsername">Username</CFormLabel>
749+
<CInputGroup class="has-validation">
750+
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
751+
<CFormInput id="validationTooltipUsername" value="" aria-describedby="inputGroupPrepend" required/>
752+
<CFormFeedback tooltip invalid>
753+
Please choose a username.
754+
</CFormFeedback>
755+
</CInputGroup>
756+
</CCol>
757+
<CCol md="6" class="position-relative">
758+
<CFormLabel for="validationTooltip03">City</CFormLabel>
759+
<CFormInput id="validationTooltip03" required/>
730760
<CFormFeedback tooltip invalid>
731-
Please choose a username.
761+
Please provide a valid city.
732762
</CFormFeedback>
733-
</CInputGroup>
734-
</CCol>
735-
<CCol md="6" class="position-relative">
736-
<CFormLabel for="validationTooltip03">City</CFormLabel>
737-
<CFormInput id="validationTooltip03" required/>
738-
<CFormFeedback tooltip invalid>
739-
Please provide a valid city.
740-
</CFormFeedback>
741-
</CCol>
742-
<CCol md="3" class="position-relative">
743-
<CFormLabel for="validationTooltip04">City</CFormLabel>
744-
<CFormSelect id="validationTooltip04" required>
745-
<option disabled value="">Choose...</option>
746-
<option>...</option>
747-
</CFormSelect>
748-
<CFormFeedback tooltip invalid>
749-
Please provide a valid city.
750-
</CFormFeedback>
751-
</CCol>
752-
<CCol md="3" class="position-relative">
753-
<CFormLabel for="validationTooltip05">City</CFormLabel>
754-
<CFormInput id="validationTooltip05" required/>
755-
<CFormFeedback tooltip invalid>
756-
Please provide a valid zip.
757-
</CFormFeedback>
758-
</CCol>
759-
<CCol xs="12" class="position-relative">
760-
<CButton color="primary" type="submit">Submit form</CButton>
761-
</CCol>
762-
</CForm>
763-
```
764-
763+
</CCol>
764+
<CCol md="3" class="position-relative">
765+
<CFormLabel for="validationTooltip04">City</CFormLabel>
766+
<CFormSelect id="validationTooltip04" required>
767+
<option disabled value="">Choose...</option>
768+
<option>...</option>
769+
</CFormSelect>
770+
<CFormFeedback tooltip invalid>
771+
Please provide a valid city.
772+
</CFormFeedback>
773+
</CCol>
774+
<CCol md="3" class="position-relative">
775+
<CFormLabel for="validationTooltip05">City</CFormLabel>
776+
<CFormInput id="validationTooltip05" required/>
777+
<CFormFeedback tooltip invalid>
778+
Please provide a valid zip.
779+
</CFormFeedback>
780+
</CCol>
781+
<CCol xs="12" class="position-relative">
782+
<CButton color="primary" type="submit">Submit form</CButton>
783+
</CCol>
784+
</CForm>
785+
</template>
765786
<script>
766787
export default {
767788
data: () => {
768789
return {
769-
validatedCustom01: null,
770-
validatedDefault01: null,
771790
validatedTooltip01: null,
772791
}
773792
},
774793
methods: {
775-
handleSubmitCustom01(event) {
794+
handleSubmitTooltip01(event) {
776795
const form = event.currentTarget
777796
if (form.checkValidity() === false) {
778797
event.preventDefault()
779798
event.stopPropagation()
780799
}
781-
this.validatedCustom01 = true
782-
},
783-
handleSubmitDefault01(event) {
800+
this.validatedTooltip01 = true
801+
}
802+
}
803+
}
804+
</script>
805+
```
806+
807+
<script>
808+
export default {
809+
data: () => {
810+
return {
811+
validatedCustom01: null,
812+
validatedTooltip01: null,
813+
}
814+
},
815+
methods: {
816+
handleSubmitCustom01(event) {
784817
const form = event.currentTarget
785818
if (form.checkValidity() === false) {
786819
event.preventDefault()
787820
event.stopPropagation()
788821
}
789-
this.validatedDefault01 = true
822+
this.validatedCustom01 = true
790823
},
791824
handleSubmitTooltip01(event) {
792825
const form = event.currentTarget

0 commit comments

Comments
 (0)