CSR-254: grey out button if not validated
This commit is contained in:
Adam Caouette
parent
42d2d6334b
commit
3c10f75b67
1 changed files with 83 additions and 61 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
|
||||
<Form :validation-schema="schema" @submit="onSubmit" v-slot="{ values, meta }">
|
||||
<div class="row px-3 mt-4">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
|
||||
|
|
@ -9,46 +9,46 @@
|
|||
How many chips are we repairing?
|
||||
</h3>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="1"
|
||||
value="1"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="1"
|
||||
value="1"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="1"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="2"
|
||||
value="2"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="2"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="2"
|
||||
value="2"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="2"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="3"
|
||||
value="3"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="3"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
groupName="demo"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="3"
|
||||
value="3"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="3"
|
||||
screenReaderOnlyText=" opens new window"
|
||||
/>
|
||||
</div>
|
||||
<div class="row px-3 form-test-error">
|
||||
|
|
@ -62,31 +62,31 @@
|
|||
<fieldset>
|
||||
<legend class="sr-only">Which windshield part needs fixed?</legend>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Single Windshield"
|
||||
value="Single Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox a"
|
||||
groupName="demo2"
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Single Windshield"
|
||||
value="Single Windshield"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox a"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Driver Side"
|
||||
value="Driver Side"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox b"
|
||||
groupName="demo2"
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Driver Side"
|
||||
value="Driver Side"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox b"
|
||||
groupName="demo2"
|
||||
/>
|
||||
<listCard
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Passenger Side"
|
||||
value="Passenger Side"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox c"
|
||||
groupName="demo2"
|
||||
isMultiSelectHorizontal
|
||||
buttonImage="windshield-damage.svg"
|
||||
buttonLabel="Passenger Side"
|
||||
value="Passenger Side"
|
||||
altText=""
|
||||
buttonID="List Card Horizontal Checkbox c"
|
||||
groupName="demo2"
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -103,15 +103,29 @@
|
|||
type="text"
|
||||
label="VIN (Required)"
|
||||
:isRequired="true"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<!-- Here, the error block is included in the component level textInput -->
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mt-4">
|
||||
<div class="col">
|
||||
<h3 class="mx-2 mt-4 mb-0">Optional field</h3>
|
||||
<textInput
|
||||
name="demo4"
|
||||
type="text"
|
||||
label="Optional field (Not Required)"
|
||||
/>
|
||||
</div>
|
||||
<!-- Here, the error block is included in the component level textInput -->
|
||||
</div>
|
||||
|
||||
<div class="g-2 mx-2 mt-6">
|
||||
<button>Get your estimate</button>
|
||||
<p>Values</p>
|
||||
<button :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
|
||||
<p>Values:</p>
|
||||
<pre>{{ values }}</pre>
|
||||
<p>Meta.valid:</p>
|
||||
<pre>{{ meta.valid }}</pre>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
|
|
@ -180,6 +194,11 @@ export default {
|
|||
onSubmit(values) {
|
||||
console.log('submitted: ', JSON.stringify(values, null ,2));
|
||||
},
|
||||
// onInvalidSubmit({ values, errors, results }) {
|
||||
// console.log("values: ", values);
|
||||
// console.log("errors: ", errors);
|
||||
// console.log("results: ", results);
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -189,4 +208,7 @@ export default {
|
|||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-test-invalid {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue