Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

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.

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).

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

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.

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)

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.