React Form Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Example#

For custom CoreUI form validation messages, you'll need to add the noValidate boolean property to your <CForm>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls.

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
1const [validated, setValidated] = useState(false)
2const handleSubmit = (event) => {
3 const form = event.currentTarget
4 if (form.checkValidity() === false) {
5 event.preventDefault()
6 event.stopPropagation()
7 }
8 setValidated(true)
9}
10return (
11 <CForm
12 className="row g-3 needs-validation"
13 noValidate
14 validated={validated}
15 onSubmit={handleSubmit}
16 >
17 <CCol md={4}>
18 <CFormInput
19 type="text"
20 defaultValue="Mark"
21 feedbackValid="Looks good!"
22 id="validationCustom01"
23 label="First name"
24 required
25 />
26 </CCol>
27 <CCol md={4}>
28 <CFormInput
29 type="text"
30 defaultValue="Otto"
31 feedbackValid="Looks good!"
32 id="validationCustom02"
33 label="First name"
34 required
35 />
36 </CCol>
37 <CCol md={4}>
38 <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
39 <CInputGroup className="has-validation">
40 <CInputGroupText>@</CInputGroupText>
41 <CFormInput
42 type="text"
43 aria-describedby="inputGroupPrependFeedback"
44 feedbackValid="Please choose a username."
45 id="validationCustomUsername"
46 required
47 />
48 </CInputGroup>
49 </CCol>
50 <CCol md={6}>
51 <CFormInput
52 type="text"
53 aria-describedby="validationCustom03Feedback"
54 feedbackInvalid="Please provide a valid city."
55 id="validationCustom03"
56 label="City"
57 required
58 />
59 </CCol>
60 <CCol md={3}>
61 <CFormSelect
62 aria-describedby="validationCustom04Feedback"
63 feedbackInvalid="Please select a valid state."
64 id="validationCustom04"
65 label="State"
66 required
67 >
68 <option disabled>Choose...</option>
69 <option>...</option>
70 </CFormSelect>
71 </CCol>
72 <CCol md={3}>
73 <CFormInput
74 type="text"
75 aria-describedby="validationCustom05Feedback"
76 feedbackInvalid="Please provide a valid zip."
77 id="validationCustom05"
78 label="Zip"
79 required
80 />
81 </CCol>
82 <CCol xs={12}>
83 <CFormCheck
84 type="checkbox"
85 id="invalidCheck"
86 label="Agree to terms and conditions"
87 required
88 />
89 <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
90 </CCol>
91 <CCol xs={12}>
92 <CButton color="primary" type="submit">
93 Submit form
94 </CButton>
95 </CCol>
96 </CForm>
97)

Browser defaults#

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

@
1<CForm className="row g-3">
2 <CCol md={4}>
3 <CFormInput
4 type="text"
5 id="validationDefault01"
6 label="First name"
7 defaultValue="Mark"
8 required
9 />
10 </CCol>
11 <CCol md={4}>
12 <CFormInput
13 type="text"
14 id="validationDefault02"
15 label="Last name"
16 defaultValue="Otto"
17 required
18 />
19 </CCol>
20 <CCol md={4}>
21 <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
22 <CInputGroup>
23 <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
24 <CFormInput
25 type="text"
26 id="validationDefaultUsername"
27 defaultValue=""
28 aria-describedby="inputGroupPrepend02"
29 required
30 />
31 </CInputGroup>
32 </CCol>
33 <CCol md={6}>
34 <CFormInput type="text" id="validationDefault03" label="City" required />
35 </CCol>
36 <CCol md={3}>
37 <CFormSelect id="validationDefault04" label="State">
38 <option disabled>Choose...</option>
39 <option>...</option>
40 </CFormSelect>
41 </CCol>
42 <CCol md={3}>
43 <CFormInput type="text" id="validationDefault05" label="Zip" required />
44 </CCol>
45 <CCol xs={12}>
46 <CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required />
47 </CCol>
48 <CCol xs={12}>
49 <CButton color="primary" type="submit">
50 Submit form
51 </CButton>
52 </CCol>
53</CForm>

Custom validation#

In case you require custom or server-side validation, you can indicate invalid and valid form fields with invalid and valid boolean properties.

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using aria-describedby (noting that this attribute allows more than one id to be referenced, in case the field already points to additional form text).

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid city.
Please provide a valid zip.
You must agree before submitting.
1<CForm className="row g-3">
2 <CCol md={4}>
3 <CFormInput
4 type="text"
5 id="validationServer01"
6 label="Email"
7 feedback="Looks good!"
8 defaultValue="[email protected]"
9 valid
10 required
11 />
12 </CCol>
13 <CCol md={4}>
14 <CFormInput
15 type="text"
16 id="validationServer02"
17 label="Repeat email"
18 feedback="Looks good!"
19 defaultValue="[email protected]"
20 valid
21 required
22 />
23 </CCol>
24 <CCol md={4}>
25 <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
26 <CInputGroup className="has-validation">
27 <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
28 <CFormInput
29 type="text"
30 id="validationServerUsername"
31 feedback="Please choose a username."
32 defaultValue=""
33 aria-describedby="inputGroupPrepend03"
34 invalid
35 required
36 />
37 </CInputGroup>
38 </CCol>
39 <CCol md={6}>
40 <CFormInput
41 type="text"
42 id="validationServer03"
43 label="City"
44 feedback="Please provide a valid city."
45 invalid
46 required
47 />
48 </CCol>
49 <CCol md={3}>
50 <CFormSelect
51 id="validationServer04"
52 label="State"
53 feedback="Please provide a valid city."
54 invalid
55 >
56 <option disabled>Choose...</option>
57 <option>...</option>
58 </CFormSelect>
59 </CCol>
60 <CCol md={3}>
61 <CFormInput
62 type="text"
63 id="validationServer05"
64 label="zip"
65 feedback="Please provide a valid zip."
66 invalid
67 required
68 />
69 </CCol>
70 <CCol xs={12}>
71 <CFormCheck
72 type="checkbox"
73 id="invalidCheck"
74 label="Agree to terms and conditions"
75 invalid
76 required
77 />
78 <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
79 </CCol>
80 <CCol xs={12}>
81 <CButton color="primary" type="submit">
82 Submit form
83 </CButton>
84 </CCol>
85</CForm>

Supported elements#

Validation styles are available for the following form controls and components:

  • <CFormCheck>s
  • <CFormInput>s
  • <CFormSelect>s
  • <CFormTextarea>s
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback
1<CForm validated={true}>
2 <div className="mb-3">
3 <CFormTextarea
4 feedbackInvalid="Please enter a message in the textarea."
5 id="validationTextarea"
6 label="Textarea"
7 placeholder="Required example textarea"
8 required
9 ></CFormTextarea>
10 </div>
11 <CFormCheck
12 className="mb-3"
13 id="validationFormCheck1"
14 label="Check this checkbox"
15 feedbackInvalid="Example invalid feedback text"
16 required
17 />
18 <CFormCheck
19 type="radio"
20 name="radio-stacked"
21 id="validationFormCheck2"
22 label="Check this checkbox"
23 required
24 />
25 <CFormCheck
26 className="mb-3"
27 type="radio"
28 name="radio-stacked"
29 id="validationFormCheck3"
30 label="Or toggle this other radio"
31 feedbackInvalid="More example invalid feedback text"
32 required
33 />
34 <div className="mb-3">
35 <CFormSelect
36 feedbackInvalid="Example invalid select feedback"
37 aria-label="select example"
38 required
39 >
40 <option selected="" value="">
41 Open this select menu
42 </option>
43 <option value="1">One</option>
44 <option value="2">Two</option>
45 <option value="3">Three</option>
46 </CFormSelect>
47 </div>
48 <div className="mb-3">
49 <CFormInput
50 type="file"
51 id="validationTextarea"
52 feedbackInvalid="Example invalid form file feedback"
53 aria-label="file example"
54 required
55 />
56 </div>
57 <div className="mb-3">
58 <CButton type="submit" color="primary" disabled>
59 Submit form
60 </CButton>
61 </div>
62</CForm>

Tooltips#

If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
1const [validated, setValidated] = useState(false)
2const handleSubmit = (event) => {
3 const form = event.currentTarget
4 if (form.checkValidity() === false) {
5 event.preventDefault()
6 event.stopPropagation()
7 }
8 setValidated(true)
9}
10return (
11 <CForm
12 className="row g-3 needs-validation"
13 noValidate
14 validated={validated}
15 onSubmit={handleSubmit}
16>
17 <CCol md={4} className="position-relative">
18 <CFormInput
19 type="text"
20 defaultValue="Mark"
21 feedbackValid="Looks good!"
22 id="validationTooltip01"
23 label="First name"
24 required
25 tooltipFeedback
26 />
27 </CCol>
28 <CCol md={4} className="position-relative">
29 <CFormInput
30 type="text"
31 defaultValue="Otto"
32 feedbackValid="Looks good!"
33 id="validationTooltip02"
34 label="First name"
35 required
36 tooltipFeedback
37 />
38 </CCol>
39 <CCol md={4} className="position-relative">
40 <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
41 <CInputGroup className="has-validation">
42 <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
43 <CFormInput
44 type="text"
45 aria-describedby="inputGroupPrependFeedback"
46 feedbackInvalid="Please choose a username."
47 id="validationTooltipUsername"
48 required
49 tooltipFeedback
50 />
51 </CInputGroup>
52 </CCol>
53 <CCol md={6} className="position-relative">
54 <CFormInput
55 type="text"
56 aria-describedby="validationTooltip03Feedback"
57 feedbackInvalid="Please provide a valid city."
58 id="validationTooltip03"
59 label="City"
60 required
61 tooltipFeedback
62 />
63 </CCol>
64 <CCol md={3} className="position-relative">
65 <CFormSelect
66 aria-describedby="validationTooltip04Feedback"
67 feedbackInvalid="Please select a valid state."
68 id="validationTooltip04"
69 label="State"
70 required
71 tooltipFeedback
72 >
73 <option selected="" disabled="" value="">
74 Choose...
75 </option>
76 <option>...</option>
77 </CFormSelect>
78 </CCol>
79 <CCol md={3} className="position-relative">
80 <CFormInput
81 type="text"
82 aria-describedby="validationTooltip05Feedback"
83 feedbackInvalid="Please provide a valid zip."
84 id="validationTooltip05"
85 label="Zip"
86 required
87 tooltipFeedback
88 />
89 </CCol>
90 <CCol xs={12} className="position-relative">
91 <CButton color="primary" type="submit">
92 Submit form
93 </CButton>
94 </CCol>
95</CForm>
96)