coreui-free-react-admin-template

1
import React, { useState } from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCol,
8
  CForm,
9
  CFormCheck,
10
  CFormInput,
11
  CFormFeedback,
12
  CFormLabel,
13
  CFormSelect,
14
  CFormTextarea,
15
  CInputGroup,
16
  CInputGroupText,
17
  CRow,
18
} from '@coreui/react'
19
import { DocsExample } from 'src/components'
20

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

98
const BrowserDefaults = () => {
99
  const [validated, setValidated] = useState(false)
100
  const handleSubmit = (event) => {
101
    const form = event.currentTarget
102
    if (form.checkValidity() === false) {
103
      event.preventDefault()
104
      event.stopPropagation()
105
    }
106
    setValidated(true)
107
  }
108
  return (
109
    <CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
110
      <CCol md={4}>
111
        <CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
112
        <CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
113
        <CFormFeedback valid>Looks good!</CFormFeedback>
114
      </CCol>
115
      <CCol md={4}>
116
        <CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
117
        <CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
118
        <CFormFeedback valid>Looks good!</CFormFeedback>
119
      </CCol>
120
      <CCol md={4}>
121
        <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
122
        <CInputGroup className="has-validation">
123
          <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
124
          <CFormInput
125
            type="text"
126
            id="validationDefaultUsername"
127
            defaultValue=""
128
            aria-describedby="inputGroupPrepend02"
129
            required
130
          />
131
          <CFormFeedback invalid>Please choose a username.</CFormFeedback>
132
        </CInputGroup>
133
      </CCol>
134
      <CCol md={6}>
135
        <CFormLabel htmlFor="validationDefault03">City</CFormLabel>
136
        <CFormInput type="text" id="validationDefault03" required />
137
        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
138
      </CCol>
139
      <CCol md={3}>
140
        <CFormLabel htmlFor="validationDefault04">City</CFormLabel>
141
        <CFormSelect id="validationDefault04">
142
          <option disabled>Choose...</option>
143
          <option>...</option>
144
        </CFormSelect>
145
        <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
146
      </CCol>
147
      <CCol md={3}>
148
        <CFormLabel htmlFor="validationDefault05">City</CFormLabel>
149
        <CFormInput type="text" id="validationDefault05" required />
150
        <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
151
      </CCol>
152
      <CCol xs={12}>
153
        <CFormCheck
154
          type="checkbox"
155
          id="invalidCheck"
156
          label="Agree to terms and conditions"
157
          required
158
        />
159
        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
160
      </CCol>
161
      <CCol xs={12}>
162
        <CButton color="primary" type="submit">
163
          Submit form
164
        </CButton>
165
      </CCol>
166
    </CForm>
167
  )
168
}
169

170
const Tooltips = () => {
171
  const [validated, setValidated] = useState(false)
172
  const handleSubmit = (event) => {
173
    const form = event.currentTarget
174
    if (form.checkValidity() === false) {
175
      event.preventDefault()
176
      event.stopPropagation()
177
    }
178
    setValidated(true)
179
  }
180
  return (
181
    <CForm
182
      className="row g-3 needs-validation"
183
      noValidate
184
      validated={validated}
185
      onSubmit={handleSubmit}
186
    >
187
      <CCol md={4} className="position-relative">
188
        <CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
189
        <CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
190
        <CFormFeedback tooltip valid>
191
          Looks good!
192
        </CFormFeedback>
193
      </CCol>
194
      <CCol md={4} className="position-relative">
195
        <CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
196
        <CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
197
        <CFormFeedback tooltip valid>
198
          Looks good!
199
        </CFormFeedback>
200
      </CCol>
201
      <CCol md={4} className="position-relative">
202
        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
203
        <CInputGroup className="has-validation">
204
          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
205
          <CFormInput
206
            type="text"
207
            id="validationTooltipUsername"
208
            defaultValue=""
209
            aria-describedby="inputGroupPrepend"
210
            required
211
          />
212
          <CFormFeedback tooltip invalid>
213
            Please choose a username.
214
          </CFormFeedback>
215
        </CInputGroup>
216
      </CCol>
217
      <CCol md={6} className="position-relative">
218
        <CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
219
        <CFormInput type="text" id="validationTooltip03" required />
220
        <CFormFeedback tooltip invalid>
221
          Please provide a valid city.
222
        </CFormFeedback>
223
      </CCol>
224
      <CCol md={3} className="position-relative">
225
        <CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
226
        <CFormSelect id="validationTooltip04" required>
227
          <option disabled defaultValue="">
228
            Choose...
229
          </option>
230
          <option>...</option>
231
        </CFormSelect>
232
        <CFormFeedback tooltip invalid>
233
          Please provide a valid city.
234
        </CFormFeedback>
235
      </CCol>
236
      <CCol md={3} className="position-relative">
237
        <CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
238
        <CFormInput type="text" id="validationTooltip05" required />
239
        <CFormFeedback tooltip invalid>
240
          Please provide a valid zip.
241
        </CFormFeedback>
242
      </CCol>
243
      <CCol xs={12} className="position-relative">
244
        <CButton color="primary" type="submit">
245
          Submit form
246
        </CButton>
247
      </CCol>
248
    </CForm>
249
  )
250
}
251

252
const Validation = () => {
253
  return (
254
    <CRow>
255
      <CCol xs={12}>
256
        <CCard className="mb-4">
257
          <CCardHeader>
258
            <strong>Validation</strong> <small>Custom styles</small>
259
          </CCardHeader>
260
          <CCardBody>
261
            <p className="text-body-secondary small">
262
              For custom CoreUI form validation messages, you&#39;ll need to add the{' '}
263
              <code>noValidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
264
              disables the browser default feedback tooltips, but still provides access to the form
265
              validation APIs in JavaScript. Try to submit the form below; our JavaScript will
266
              intercept the submit button and relay feedback to you. When attempting to submit,
267
              you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to
268
              your form controls.
269
            </p>
270
            <p className="text-body-secondary small">
271
              Custom feedback styles apply custom colors, borders, focus styles, and background
272
              icons to better communicate feedback.{' '}
273
            </p>
274
            <DocsExample href="forms/validation">{CustomStyles()}</DocsExample>
275
          </CCardBody>
276
        </CCard>
277
      </CCol>
278
      <CCol xs={12}>
279
        <CCard className="mb-4">
280
          <CCardHeader>
281
            <strong>Validation</strong> <small>Browser defaults</small>
282
          </CCardHeader>
283
          <CCardBody>
284
            <p className="text-body-secondary small">
285
              Not interested in custom validation feedback messages or writing JavaScript to change
286
              form behaviors? All good, you can use the browser defaults. Try submitting the form
287
              below. Depending on your browser and OS, you&#39;ll see a slightly different style of
288
              feedback.
289
            </p>
290
            <p className="text-body-secondary small">
291
              While these feedback styles cannot be styled with CSS, you can still customize the
292
              feedback text through JavaScript.
293
            </p>
294
            <DocsExample href="forms/validation#browser-defaults">{BrowserDefaults()}</DocsExample>
295
          </CCardBody>
296
        </CCard>
297
      </CCol>
298
      <CCol xs={12}>
299
        <CCard className="mb-4">
300
          <CCardHeader>
301
            <strong>Validation</strong> <small>Server side</small>
302
          </CCardHeader>
303
          <CCardBody>
304
            <p className="text-body-secondary small">
305
              We recommend using client-side validation, but in case you require server-side
306
              validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
307
              and <code>valid</code> boolean properties.
308
            </p>
309
            <p className="text-body-secondary small">
310
              For invalid fields, ensure that the invalid feedback/error message is associated with
311
              the relevant form field using <code>aria-describedby</code> (noting that this
312
              attribute allows more than one <code>id</code> to be referenced, in case the field
313
              already points to additional form text).
314
            </p>
315
            <DocsExample href="forms/validation#server-side">
316
              <CForm className="row g-3 needs-validation">
317
                <CCol md={4}>
318
                  <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
319
                  <CFormInput
320
                    type="text"
321
                    id="validationServer01"
322
                    defaultValue="Mark"
323
                    valid
324
                    required
325
                  />
326
                  <CFormFeedback valid>Looks good!</CFormFeedback>
327
                </CCol>
328
                <CCol md={4}>
329
                  <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
330
                  <CFormInput
331
                    type="text"
332
                    id="validationServer02"
333
                    defaultValue="Otto"
334
                    valid
335
                    required
336
                  />
337
                  <CFormFeedback valid>Looks good!</CFormFeedback>
338
                </CCol>
339
                <CCol md={4}>
340
                  <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
341
                  <CInputGroup className="has-validation">
342
                    <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
343
                    <CFormInput
344
                      type="text"
345
                      id="validationServerUsername"
346
                      defaultValue=""
347
                      aria-describedby="inputGroupPrepend03"
348
                      invalid
349
                      required
350
                    />
351
                    <CFormFeedback invalid>Please choose a username.</CFormFeedback>
352
                  </CInputGroup>
353
                </CCol>
354
                <CCol md={6}>
355
                  <CFormLabel htmlFor="validationServer03">City</CFormLabel>
356
                  <CFormInput type="text" id="validationServer03" invalid required />
357
                  <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
358
                </CCol>
359
                <CCol md={3}>
360
                  <CFormLabel htmlFor="validationServer04">City</CFormLabel>
361
                  <CFormSelect id="validationServer04" invalid>
362
                    <option disabled>Choose...</option>
363
                    <option>...</option>
364
                  </CFormSelect>
365
                  <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
366
                </CCol>
367
                <CCol md={3}>
368
                  <CFormLabel htmlFor="validationServer05">City</CFormLabel>
369
                  <CFormInput type="text" id="validationServer05" invalid required />
370
                  <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
371
                </CCol>
372
                <CCol xs={12}>
373
                  <CFormCheck
374
                    type="checkbox"
375
                    id="invalidCheck"
376
                    label="Agree to terms and conditions"
377
                    invalid
378
                    required
379
                  />
380
                  <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
381
                </CCol>
382
                <CCol xs={12}>
383
                  <CButton color="primary" type="submit">
384
                    Submit form
385
                  </CButton>
386
                </CCol>
387
              </CForm>
388
            </DocsExample>
389
          </CCardBody>
390
        </CCard>
391
      </CCol>
392
      <CCol xs={12}>
393
        <CCard className="mb-4">
394
          <CCardHeader>
395
            <strong>Validation</strong> <small>Supported elements</small>
396
          </CCardHeader>
397
          <CCardBody>
398
            <p className="text-body-secondary small">
399
              Validation styles are available for the following form controls and components:
400
            </p>
401
            <ul>
402
              <li>
403
                <code>&lt;CFormInput&gt;</code>s
404
              </li>
405
              <li>
406
                <code>&lt;CFormSelect&gt;</code>s
407
              </li>
408
              <li>
409
                <code>&lt;CFormCheck&gt;</code>s
410
              </li>
411
            </ul>
412
            <DocsExample href="forms/validation#supported-elements">
413
              <CForm validated={true}>
414
                <div className="mb-3">
415
                  <CFormLabel htmlFor="validationTextarea" className="form-label">
416
                    Textarea
417
                  </CFormLabel>
418
                  <CFormTextarea
419
                    id="validationTextarea"
420
                    placeholder="Required example textarea"
421
                    invalid
422
                    required
423
                  ></CFormTextarea>
424
                  <CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
425
                </div>
426
                <CFormCheck
427
                  className="mb-3"
428
                  id="validationFormCheck1"
429
                  label="Check this checkbox"
430
                  required
431
                />
432
                <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
433

434
                <CFormCheck
435
                  type="radio"
436
                  name="radio-stacked"
437
                  id="validationFormCheck2"
438
                  label="Check this checkbox"
439
                  required
440
                />
441

442
                <CFormCheck
443
                  className="mb-3"
444
                  type="radio"
445
                  name="radio-stacked"
446
                  id="validationFormCheck3"
447
                  label="Or toggle this other radio"
448
                  required
449
                />
450
                <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
451

452
                <div className="mb-3">
453
                  <CFormSelect required aria-label="select example">
454
                    <option>Open this select menu</option>
455
                    <option value="1">One</option>
456
                    <option value="2">Two</option>
457
                    <option value="3">Three</option>
458
                  </CFormSelect>
459
                  <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
460
                </div>
461

462
                <div className="mb-3">
463
                  <CFormInput
464
                    type="file"
465
                    id="validationTextarea"
466
                    aria-label="file example"
467
                    required
468
                  />
469
                  <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
470
                </div>
471

472
                <div className="mb-3">
473
                  <CButton type="submit" color="primary" disabled>
474
                    Submit form
475
                  </CButton>
476
                </div>
477
              </CForm>
478
            </DocsExample>
479
          </CCardBody>
480
        </CCard>
481
      </CCol>
482
      <CCol xs={12}>
483
        <CCard className="mb-4">
484
          <CCardHeader>
485
            <strong>Validation</strong> <small>Tooltips</small>
486
          </CCardHeader>
487
          <CCardBody>
488
            <p className="text-body-secondary small">
489
              If your form layout allows it, you can swap the text for the tooltip to display
490
              validation feedback in a styled tooltip. Be sure to have a parent with{' '}
491
              <code>position: relative</code> on it for tooltip positioning. In the example below,
492
              our column classes have this already, but your project may require an alternative
493
              setup.
494
            </p>
495
            <DocsExample href="forms/validation#tooltips">{Tooltips()}</DocsExample>
496
          </CCardBody>
497
        </CCard>
498
      </CCol>
499
    </CRow>
500
  )
501
}
502

503
export default Validation
504