CSR-254: fixes and tweaks

This commit is contained in:
Adam Caouette 2022-01-18 17:44:12 -05:00
parent a081592f32
commit dd99a541ec

View file

@ -4,9 +4,11 @@
@submit="onSubmit" @submit="onSubmit"
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
v-slot="{ values, meta }" v-slot="{ values, meta }"
class="w-50"
> >
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
<h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2> <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
<p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
</div> </div>
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
@ -103,7 +105,7 @@
</div> </div>
</div> </div>
<div class="row g-2 mt-6 mx-4"> <!-- <div class="row g-2 mt-6 mx-4">
<div class="col"> <div class="col">
<h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4> <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
<textInput <textInput
@ -113,7 +115,7 @@
:isRequired="true" :isRequired="true"
/> />
</div> </div>
</div> </div> -->
<div class="row g-2 mt-6 mx-4"> <div class="row g-2 mt-6 mx-4">
<h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4> <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
@ -247,13 +249,25 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
export default { export default {
name: "App", name: "App",
data() { data() {
const errorMessages = {
demo: 'Please select chip(s)',
demo2: 'Please select a windshield part',
demo3: 'You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.',
demo4: 'Invalid Entry. Must enter only numbers, no letters.',
demo5: 'Please select damage location',
};
return { return {
schema: Yup.object().shape({ schema: Yup.object().shape({
demo: Yup.string().required('Please select chip(s)'), demo: Yup.string().required(errorMessages.demo),
demo2: Yup.array().required('Please select a windshield part').min(1, 'Please select a windshield part'), demo2: Yup.array().required(errorMessages.demo2).min(1, errorMessages.demo2),
demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'), demo3: Yup.string()
demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'), .uppercase()
demo5: Yup.array().required('Please select damage location').min(1, 'Please select damage location'), .required('Please enter a VIN.')
.min(17, errorMessages.demo3)
.max(17, errorMessages.demo3)
.matches('^[^IOQ]+$', errorMessages.demo3),
demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
demo5: Yup.array().required(errorMessages.demo5).min(1, errorMessages.demo5),
demo6: Yup.string() demo6: Yup.string()
.when('demo5', function (demo5, schema, value) { .when('demo5', function (demo5, schema, value) {
if (demo5) { if (demo5) {
@ -267,11 +281,11 @@ export default {
return schema; return schema;
}), }),
demoX: Yup.string().notRequired(), demoX: Yup.string().notRequired(),
// // PASSWORD EXAMPLE, NOT BEING USED NOW // PASSWORD EXAMPLE, NOT BEING USED NOW
//password: Yup.string().min(6).required(), password: Yup.string().min(6).required(),
//passwordConfirmation: Yup.string() passwordConfirmation: Yup.string()
// .required() .required()
// .oneOf([Yup.ref("password")], "Passwords do not match"), .oneOf([Yup.ref("password")], "Passwords do not match"),
}).test('repair-replace-conflict', }).test('repair-replace-conflict',
null, // need to pass null as error message so it won't get added to list of errors null, // need to pass null as error message so it won't get added to list of errors
function(value) { function(value) {