sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: remove eslint and prettier warnings

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-10-31 20:50:56 +01:00
parent 1660d556f7
commit d2d9de7520
40 changed files with 388 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/forms/ChecksRadios.vue
+54 -58
View File
@@ -14,7 +14,7 @@
<CFormCheck
id="flexCheckChecked"
label="Checked checkbox"
defaultChecked
checked
/>
</DocsExample>
</CCardBody>
@@ -33,11 +33,7 @@
</p>
<DocsExample href="forms/checks-radios.html#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
defaultChecked
disabled
/>
<CFormCheck label="Disabled checked checkbox" checked disabled />
</DocsExample>
</CCardBody>
</CCard>
@@ -55,17 +51,17 @@
</p>
<DocsExample href="forms/checks-radios.html#radios">
<CFormCheck
id="flexRadioDefault1"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
label="Default radio"
/>
<CFormCheck
id="flexRadioDefault2"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault2"
label="Checked radio"
defaultChecked
checked
/>
</DocsExample>
</CCardBody>
@@ -79,18 +75,18 @@
<CCardBody>
<DocsExample href="forms/checks-radios.html#disabled-1">
<CFormCheck
id="flexRadioDisabled"
type="radio"
name="flexRadioDisabled"
id="flexRadioDisabled"
label="Disabled radio"
disabled
/>
<CFormCheck
id="flexRadioCheckedDisabled"
type="radio"
name="flexRadioDisabled"
id="flexRadioCheckedDisabled"
label="Disabled checked radio"
defaultChecked
checked
disabled
/>
</DocsExample>
@@ -110,23 +106,23 @@
</p>
<DocsExample href="forms/checks-radios.html#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
label="Default switch checkbox input"
/>
<CFormSwitch
label="Checked switch checkbox input"
id="formSwitchCheckChecked"
defaultChecked
label="Checked switch checkbox input"
checked
/>
<CFormSwitch
label="Disabled switch checkbox input"
id="formSwitchCheckDisabled"
label="Disabled switch checkbox input"
disabled
/>
<CFormSwitch
label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled"
defaultChecked
label="Disabled checked switch checkbox input"
checked
disabled
/>
</DocsExample>
@@ -141,18 +137,18 @@
<CCardBody>
<DocsExample href="forms/checks-radios.html#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
label="Default switch checkbox input"
/>
<CFormSwitch
id="formSwitchCheckDefaultLg"
size="lg"
label="Large switch checkbox input"
id="formSwitchCheckDefaultLg"
/>
<CFormSwitch
id="formSwitchCheckDefaultXL"
size="xl"
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</DocsExample>
</CCardBody>
@@ -175,24 +171,24 @@
</DocsExample>
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck
id="exampleRadios1"
type="radio"
name="exampleRadios"
id="exampleRadios1"
value="option1"
label="Default radio"
defaultChecked
checked
/>
<CFormCheck
id="exampleRadios2"
type="radio"
name="exampleRadios"
id="exampleRadios2"
value="option2"
label="Second default radio"
/>
<CFormCheck
id="exampleRadios3"
type="radio"
name="exampleRadios"
id="exampleRadios3"
value="option3"
label="Disabled radio"
disabled
@@ -213,11 +209,11 @@
<code>&lt;CFormCheck&gt;</code>.
</p>
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck id="inlineCheckbox1" inline value="option1" label="1" />
<CFormCheck id="inlineCheckbox2" inline value="option2" label="2" />
<CFormCheck
inline
id="inlineCheckbox3"
inline
value="option3"
label="3 (disabled)"
disabled
@@ -225,26 +221,26 @@
</DocsExample>
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck
id="inlineCheckbox1"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox1"
value="option1"
label="1"
/>
<CFormCheck
id="inlineCheckbox2"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox2"
value="option2"
label="2"
/>
<CFormCheck
id="inlineCheckbox3"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox3"
value="option3"
label="3 (disabled)"
disabled
@@ -269,9 +265,9 @@
</div>
<div>
<CFormCheck
id="radioNoLabel"
type="radio"
name="radioNoLabel"
id="radioNoLabel"
value=""
aria-label="..."
/>
@@ -294,26 +290,26 @@
</p>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Single toggle"
/>
</DocsExample>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
</DocsExample>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Disabled"
disabled
/>
@@ -321,37 +317,37 @@
<h3>Radio toggle buttons</h3>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
id="option1"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option1"
autoComplete="off"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
<CFormCheck
id="option2"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option2"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
<CFormCheck
id="option3"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option3"
autoComplete="off"
autocomplete="off"
label="Radio"
disabled
/>
<CFormCheck
id="option4"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option4"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
</DocsExample>
@@ -363,37 +359,37 @@
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btn-check-outlined"
autoComplete="off"
:button="{ color: 'primary', variant: 'outline' }"
autocomplete="off"
label="Single toggle"
/>
</div>
<div>
<CFormCheck
:button="{ color: 'secondary', variant: 'outline' }"
id="btn-check-2-outlined"
autoComplete="off"
:button="{ color: 'secondary', variant: 'outline' }"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
</div>
<div>
<CFormCheck
id="success-outlined"
:button="{ color: 'success', variant: 'outline' }"
type="radio"
name="options-outlined"
id="success-outlined"
autoComplete="off"
autocomplete="off"
label="Radio"
defaultChecked
checked
/>
<CFormCheck
id="danger-outlined"
:button="{ color: 'danger', variant: 'outline' }"
type="radio"
name="options-outlined"
id="danger-outlined"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
</div>
src/views/forms/FloatingLabels.vue
+15 -21
View File
@@ -22,19 +22,19 @@
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput
type="email"
id="floatingInput"
type="email"
placeholder="name@example.com"
/>
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
<CFormLabel for="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput
type="password"
id="floatingPassword"
type="password"
placeholder="Password"
/>
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
<CFormLabel for="floatingPassword">Password</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
@@ -45,14 +45,12 @@
<DocsExample href="forms/floating-labels.html">
<CFormFloating>
<CFormInput
type="email"
id="floatingInputValue"
type="email"
placeholder="name@example.com"
defaultValue="test@example.com"
value="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue"
>Input with value</CFormLabel
>
<CFormLabel for="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -74,7 +72,7 @@
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
@@ -85,11 +83,11 @@
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
id="floatingTextarea2"
placeholder="Leave a comment here"
style="height: 100px"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
<CFormLabel for="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -123,9 +121,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect"
>Works with selects</CFormLabel
>
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -146,14 +142,12 @@
<CCol md>
<CFormFloating>
<CFormInput
type="email"
id="floatingInputGrid"
type="email"
placeholder="name@example.com"
defaultValue="email@example.com"
value="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid"
>Email address</CFormLabel
>
<CFormLabel for="floatingInputGrid">Email address</CFormLabel>
</CFormFloating>
</CCol>
<CCol md>
@@ -167,7 +161,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid"
<CFormLabel for="floatingSelectGrid"
>Works with selects</CFormLabel
>
</CFormFloating>
src/views/forms/FormControl.vue
+22 -22
View File
@@ -16,8 +16,8 @@
>Email address</CFormLabel
>
<CFormInput
type="email"
id="exampleFormControlInput1"
type="email"
placeholder="name@example.com"
/>
</div>
@@ -92,7 +92,7 @@
placeholder="Disabled readonly input"
aria-label="Disabled input example"
disabled
readOnly
readonly
/>
<br />
</DocsExample>
@@ -106,7 +106,7 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to
Add the <code>readonly</code> boolean attribute on an input to
prevent modification of the input&#39;s value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
cursor.
@@ -116,7 +116,7 @@
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
readonly
/>
</DocsExample>
</CCardBody>
@@ -131,7 +131,7 @@
<p class="text-medium-emphasis small">
If you want to have <code>&lt;input readonly&gt;</code> elements in
your form styled as plain text, use the
<code>plainText</code> boolean property to remove the default form
<code>plain-text</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<DocsExample href="components/accordion">
@@ -141,11 +141,11 @@
</CFormLabel>
<div class="col-sm-10">
<CFormInput
type="text"
id="staticEmail"
defaultValue="email@example.com"
readOnly
plainText
type="text"
value="email@example.com"
readonly
plain-text
/>
</div>
</CRow>
@@ -154,7 +154,7 @@
Password
</CFormLabel>
<div class="col-sm-10">
<CFormInput type="password" id="inputPassword" />
<CFormInput id="inputPassword" type="password" />
</div>
</CRow>
</DocsExample>
@@ -165,11 +165,11 @@
Email
</CFormLabel>
<CFormInput
type="text"
id="staticEmail2"
defaultValue="email@example.com"
readOnly
plainText
type="text"
value="email@example.com"
readonly
plain-text
/>
</div>
<div class="col-auto">
@@ -177,8 +177,8 @@
Password
</CFormLabel>
<CFormInput
type="password"
id="inputPassword2"
type="password"
placeholder="Password"
/>
</div>
@@ -199,27 +199,27 @@
<DocsExample href="forms/form-control.html#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
<CFormInput id="formFile" type="file" />
</div>
<div class="mb-3">
<CFormLabel for="formFileMultiple"
>Multiple files input example</CFormLabel
>
<CFormInput type="file" id="formFileMultiple" multiple />
<CFormInput id="formFileMultiple" type="file" multiple />
</div>
<div class="mb-3">
<CFormLabel for="formFileDisabled"
>Disabled file input example</CFormLabel
>
<CFormInput type="file" id="formFileDisabled" disabled />
<CFormInput id="formFileDisabled" type="file" disabled />
</div>
<div class="mb-3">
<CFormLabel for="formFileSm">Small file input example</CFormLabel>
<CFormInput type="file" size="sm" id="formFileSm" />
<CFormInput id="formFileSm" type="file" size="sm" />
</div>
<div>
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" />
<CFormInput id="formFileLg" type="file" size="lg" />
</div>
</DocsExample>
</CCardBody>
@@ -234,9 +234,9 @@
<DocsExample href="forms/form-control.html#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
id="exampleColorInput"
defaultValue="#563d7c"
type="color"
value="#563d7c"
title="Choose your color"
/>
</DocsExample>
src/views/forms/InputGroup.vue
+8 -8
View File
@@ -224,10 +224,10 @@
<DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton
id="button-addon1"
type="button"
color="secondary"
variant="outline"
id="button-addon1"
>
Button
</CButton>
@@ -244,10 +244,10 @@
aria-describedby="button-addon2"
/>
<CButton
id="button-addon2"
type="button"
color="secondary"
variant="outline"
id="button-addon2"
>
Button
</CButton>
@@ -467,42 +467,42 @@
<CInputGroupText component="label" for="inputGroupFile01">
Upload
</CInputGroupText>
<CFormInput type="file" id="inputGroupFile01" />
<CFormInput id="inputGroupFile01" type="file" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput type="file" id="inputGroupFile02" />
<CFormInput id="inputGroupFile02" type="file" />
<CInputGroupText component="label" for="inputGroupFile02">
Upload
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton
id="inputGroupFileAddon03"
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon03"
>
Button
</CButton>
<CFormInput
type="file"
id="inputGroupFile03"
type="file"
aria-describedby="inputGroupFileAddon03"
aria-label="Upload"
/>
</CInputGroup>
<CInputGroup>
<CFormInput
type="file"
id="inputGroupFile04"
type="file"
aria-describedby="inputGroupFileAddon04"
aria-label="Upload"
/>
<CButton
id="inputGroupFileAddon04"
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon04"
>
Button
</CButton>
src/views/forms/Layout.vue
+16 -16
View File
@@ -55,11 +55,11 @@
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
<CFormInput type="email" id="inputEmail4" />
<CFormInput id="inputEmail4" type="email" />
</CCol>
<CCol :md="6">
<CFormLabel for="inputPassword4">Password</CFormLabel>
<CFormInput type="password" id="inputPassword4" />
<CFormInput id="inputPassword4" type="password" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress">Address</CFormLabel>
@@ -89,8 +89,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="gridCheck"
type="checkbox"
label="Check me out"
/>
</CCol>
@@ -129,7 +129,7 @@
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput type="email" id="inputEmail3" />
<CFormInput id="inputEmail3" type="email" />
</CCol>
</CRow>
<CRow class="mb-3">
@@ -140,31 +140,31 @@
Password
</CFormLabel>
<CCol :sm="10">
<CFormInput type="password" id="inputPassword3" />
<CFormInput id="inputPassword3" type="password" />
</CCol>
</CRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol :sm="10">
<CFormCheck
id="gridRadios1"
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
label="First radio"
defaultChecked
checked
/>
<CFormCheck
id="gridRadios2"
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2"
label="Second radio"
/>
<CFormCheck
id="gridRadios3"
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
label="Third disabled radio"
disabled
@@ -174,8 +174,8 @@
<CRow class="mb-3">
<div class="col-sm-10 offset-sm-2">
<CFormCheck
type="checkbox"
id="gridCheck1"
type="checkbox"
label="Example checkbox"
/>
</div>
@@ -209,9 +209,9 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
id="colFormLabelSm"
type="email"
class="form-control form-control-sm"
id="colFormLabelSm"
placeholder="col-form-label-sm"
/>
</CCol>
@@ -222,8 +222,8 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
id="colFormLabel"
type="email"
placeholder="col-form-label"
/>
</CCol>
@@ -237,9 +237,9 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
id="colFormLabelLg"
type="email"
class="form-control form-control-lg"
id="colFormLabelLg"
placeholder="col-form-label-lg"
/>
</CCol>
@@ -327,8 +327,8 @@
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck"
type="checkbox"
label="Remember me"
/>
</CCol>
@@ -377,8 +377,8 @@
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck2"
type="checkbox"
label="Remember me"
/>
</CCol>
@@ -435,8 +435,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="inlineFormCheck"
type="checkbox"
label="Remember me"
/>
</CCol>
src/views/forms/Range.vue
+3 -3
View File
@@ -50,7 +50,7 @@
</p>
<DocsExample href="forms/range.html#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
<CFormRange id="customRange2" :min="0" :max="5" value="3" />
</DocsExample>
</CCardBody>
</CCard>
@@ -70,11 +70,11 @@
<DocsExample href="forms/range.html#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
id="customRange3"
:min="0"
:max="5"
:step="0.5"
defaultValue="3"
id="customRange3"
value="3"
/>
</DocsExample>
</CCardBody>
src/views/forms/Validation.vue
+40 -66
View File
@@ -9,7 +9,7 @@
<p class="text-medium-emphasis small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>noValidate</code> boolean property to your
<code>novalidate</code> boolean property to your
<code>&lt;CForm&gt;</code>. 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
@@ -24,26 +24,18 @@
<DocsExample href="forms/validation.html">
<CForm
class="row g-3 needs-validation"
noValidate
novalidate
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
<CCol :md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput
id="validationCustom01"
defaultValue="Mark"
required
/>
<CFormInput id="validationCustom01" value="Mark" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput
id="validationCustom02"
defaultValue="Otto"
required
/>
<CFormInput id="validationCustom02" value="Otto" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
@@ -52,7 +44,7 @@
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationCustomUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend"
required
/>
@@ -87,8 +79,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
required
/>
@@ -129,20 +121,12 @@
>
<CCol :md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput
id="validationDefault01"
defaultValue="Mark"
required
/>
<CFormInput id="validationDefault01" value="Mark" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput
id="validationDefault02"
defaultValue="Otto"
required
/>
<CFormInput id="validationDefault02" value="Otto" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
@@ -153,7 +137,7 @@
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput
id="validationDefaultUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend02"
required
/>
@@ -188,8 +172,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
required
/>
@@ -227,37 +211,35 @@
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol ::md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormLabel for="validationServer01">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer01"
defaultValue="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer02"
defaultValue="Otto"
value="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel
>
<CFormLabel for="validationServer02">Email</CFormLabel>
<CFormInput
id="validationServer02"
type="text"
value="Otto"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel for="validationServerUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormInput
type="text"
id="validationServerUsername"
defaultValue=""
type="text"
value=""
aria-describedby="inputGroupPrepend03"
invalid
required
@@ -268,10 +250,10 @@
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormLabel for="validationServer03">City</CFormLabel>
<CFormInput
type="text"
id="validationServer03"
type="text"
invalid
required
/>
@@ -280,7 +262,7 @@
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormLabel for="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option>
<option>...</option>
@@ -290,10 +272,10 @@
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormLabel for="validationServer05">City</CFormLabel>
<CFormInput
type="text"
id="validationServer05"
type="text"
invalid
required
/>
@@ -303,8 +285,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
invalid
required
@@ -353,8 +335,8 @@
</CFormFeedback>
</div>
<CFormCheck
class="mb-3"
id="validationFormCheck1"
class="mb-3"
label="Check this checkbox"
required
/>
@@ -362,17 +344,17 @@
>Example invalid feedback text</CFormFeedback
>
<CFormCheck
id="validationFormCheck2"
type="radio"
name="radio-stacked"
id="validationFormCheck2"
label="Check this checkbox"
required
/>
<CFormCheck
id="validationFormCheck3"
class="mb-3"
type="radio"
name="radio-stacked"
id="validationFormCheck3"
label="Or toggle this other radio"
required
/>
@@ -392,8 +374,8 @@
</div>
<div class="mb-3">
<CFormInput
type="file"
id="validationTextarea"
type="file"
aria-label="file example"
required
/>
@@ -428,26 +410,18 @@
<DocsExample href="forms/validation.html#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
novalidate
:validated="validatedTooltip01"
@submit="handleSubmitTooltip01"
>
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput
id="validationTooltip01"
defaultValue="Mark"
required
/>
<CFormInput id="validationTooltip01" value="Mark" required />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput
id="validationTooltip02"
defaultValue="Otto"
required
/>
<CFormInput id="validationTooltip02" value="Otto" required />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4" class="position-relative">
@@ -458,7 +432,7 @@
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationTooltipUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend"
required
/>