@remoteoss/json-schema-form 0.5.0-dev.20230719162322 → 0.5.0-dev.20230901130231

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+#### 0.4.5-beta.0 (2023-08-31)
+
+##### Changes
+
+* Allow validation of consts to support single values ([#34](https://github.com/remoteoss/json-schema-form/pull/34)) ([bf07870d](https://github.com/remoteoss/json-schema-form/commit/bf07870d407d9b9b078882a078b9e4c7928df868))
+
+#### 0.4.4-beta.0 (2023-08-30)
+
+##### Chores
+
+* **fieldset:**  ignore values not matching the field type ([#44](https://github.com/remoteoss/json-schema-form/pull/44)) ([f0af54e5](https://github.com/remoteoss/json-schema-form/commit/f0af54e5d425fb78524ab150bb31629d00369a61))
+
+#### 0.4.3-beta.0 (2023-08-09)
+
+##### Bug fixes
+
+* **conditions:** Validate a deeply nested if (e.g. checking an object with a number property) in an if property now doesn't break the form. ([#33](https://github.com/remoteoss/json-schema-form/pull/33)) ([e34cfcc](https://github.com/remoteoss/json-schema-form/commit/e34cfccaf45f1460b346f3cff0c797b3d11259e3))
+
+#### 0.4.2-beta.0 (2023-07-20)
+
+##### Bug Fixes
+
+* **date:**  Validate based on minDate and maxDate ([#30](https://github.com/remoteoss/json-schema-form/pull/30)) ([01c0143e](https://github.com/remoteoss/json-schema-form/commit/01c0143ea4a3775f9489ae6cb8fd99a90b3f1394))
+
 #### 0.4.1-beta.0 (2023-07-03)
 
 ##### Bug Fixes

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*!
  Copyright (c) 2023 Remote Technology, Inc.
- NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230719162322
- Generated: Wed, 19 Jul 2023 16:23:38 GMT
+ NPM Package: @remoteoss/json-schema-form@0.5.0-dev.20230901130231
+ Generated: Fri, 01 Sep 2023 13:03:04 GMT
 
  MIT License
 
@@ -84,6 +84,69 @@ var import_omitBy = __toESM(require("lodash/omitBy"));
 var import_set = __toESM(require("lodash/set"));
 var import_yup2 = require("yup");
 
+// src/utils.js
+function convertDiskSizeFromTo(from, to) {
+  const units = ["bytes", "kb", "mb"];
+  return function convert(value) {
+    return value * Math.pow(1024, units.indexOf(from.toLowerCase())) / Math.pow(1024, units.indexOf(to.toLowerCase()));
+  };
+}
+function containsHTML(str = "") {
+  return /<[a-z][\s\S]*>/i.test(str);
+}
+function wrapWithSpan(html, properties = {}) {
+  const attributes = Object.entries(properties).reduce((acc, [key, value]) => `${acc}${key}="${value}" `, "").trim();
+  return `<span ${attributes}>${html}</span>`;
+}
+function hasProperty(object2, propertyName) {
+  return Object.prototype.hasOwnProperty.call(object2, propertyName);
+}
+
+// src/checkIfConditionMatches.js
+function checkIfConditionMatches(node, formValues, formFields) {
+  return Object.keys(node.if.properties).every((name) => {
+    const currentProperty = node.if.properties[name];
+    const value = formValues[name];
+    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
+    value === null;
+    const hasIfExplicit = node.if.required?.includes(name);
+    if (hasEmptyValue && !hasIfExplicit) {
+      return true;
+    }
+    if (hasProperty(currentProperty, "const")) {
+      return compareFormValueWithSchemaValue(value, currentProperty.const);
+    }
+    if (currentProperty.contains?.pattern) {
+      const formValue = value || [];
+      if (Array.isArray(formValue)) {
+        const pattern = new RegExp(currentProperty.contains.pattern);
+        return (value || []).some((item) => pattern.test(item));
+      }
+    }
+    if (currentProperty.enum) {
+      return currentProperty.enum.includes(value);
+    }
+    if (currentProperty.properties) {
+      return checkIfConditionMatches(
+        { if: currentProperty },
+        formValues[name],
+        getField(name, formFields).fields
+      );
+    }
+    const field = getField(name, formFields);
+    return validateFieldSchema(
+      {
+        options: field.options,
+        // @TODO/CODE SMELL. We are passing the property (raw field), but buildYupSchema() expected the output field.
+        ...currentProperty,
+        inputType: field.inputType,
+        required: true
+      },
+      value
+    );
+  });
+}
+
 // src/internals/helpers.js
 var import_merge = __toESM(require("lodash/fp/merge"));
 var import_get = __toESM(require("lodash/get"));
@@ -343,29 +406,108 @@ function _composeFieldCustomClosure(defaultComposeFn) {
   };
 }
 
-// src/utils.js
-function convertDiskSizeFromTo(from, to) {
-  const units = ["bytes", "kb", "mb"];
-  return function convert(value) {
-    return value * Math.pow(1024, units.indexOf(from.toLowerCase())) / Math.pow(1024, units.indexOf(to.toLowerCase()));
+// src/yupSchema.js
+var import_flow = __toESM(require("lodash/flow"));
+var import_noop = __toESM(require("lodash/noop"));
+var import_randexp = require("randexp");
+var import_yup = require("yup");
+
+// src/jsonLogic.js
+var import_json_logic_js = __toESM(require("json-logic-js"));
+function createValidationChecker(schema) {
+  const scopes = /* @__PURE__ */ new Map();
+  function createScopes(jsonSchema, key = "root") {
+    scopes.set(key, createValidationsScope(jsonSchema));
+    Object.entries(jsonSchema?.properties ?? {}).filter(([, property]) => property.type === "object" || property.type === "array").forEach(([key2, property]) => {
+      if (property.type === "array") {
+        createScopes(property.items, `${key2}[]`);
+      } else {
+        createScopes(property, key2);
+      }
+    });
+  }
+  createScopes(schema);
+  return {
+    scopes,
+    getScope(name = "root") {
+      return scopes.get(name);
+    }
   };
 }
-function containsHTML(str = "") {
-  return /<[a-z][\s\S]*>/i.test(str);
+function createValidationsScope(schema) {
+  const validationMap = /* @__PURE__ */ new Map();
+  const computedValuesMap = /* @__PURE__ */ new Map();
+  const logic = schema?.["x-jsf-logic"] ?? {
+    validations: {},
+    computedValues: {}
+  };
+  const validations = Object.entries(logic.validations ?? {});
+  const computedValues = Object.entries(logic.computedValues ?? {});
+  validations.forEach(([id, validation]) => {
+    validationMap.set(id, validation);
+  });
+  computedValues.forEach(([id, computedValue]) => {
+    computedValuesMap.set(id, computedValue);
+  });
+  function validate(rule, values) {
+    return import_json_logic_js.default.apply(rule, replaceUndefinedValuesWithNulls(values));
+  }
+  return {
+    validationMap,
+    computedValuesMap,
+    validate,
+    applyValidationRuleInCondition(id, values) {
+      const validation = validationMap.get(id);
+      return validate(validation.rule, values);
+    },
+    applyComputedValueInField(id, values) {
+      const validation = computedValuesMap.get(id);
+      return validate(validation.rule, values);
+    },
+    applyComputedValueRuleInCondition(id, values) {
+      const validation = computedValuesMap.get(id);
+      return validate(validation.rule, values);
+    }
+  };
 }
-function wrapWithSpan(html, properties = {}) {
-  const attributes = Object.entries(properties).reduce((acc, [key, value]) => `${acc}${key}="${value}" `, "").trim();
-  return `<span ${attributes}>${html}</span>`;
+function replaceUndefinedValuesWithNulls(values = {}) {
+  return Object.entries(values).reduce((prev, [key, value]) => {
+    return { ...prev, [key]: value === void 0 ? null : value };
+  }, {});
 }
-function hasProperty(object2, propertyName) {
-  return Object.prototype.hasOwnProperty.call(object2, propertyName);
+function yupSchemaWithCustomJSONLogic({ field, logic, config, id }) {
+  const { parentID = "root" } = config;
+  const validation = logic.getScope(parentID).validationMap.get(id);
+  return (yupSchema) => yupSchema.test(
+    `${field.name}-validation-${id}`,
+    validation?.errorMessage ?? "This field is invalid.",
+    (value, { parent }) => {
+      if (value === void 0 && !field.required)
+        return true;
+      return import_json_logic_js.default.apply(validation.rule, parent);
+    }
+  );
+}
+function calculateComputedAttributes(fieldParams, { parentID = "root" } = {}) {
+  return ({ logic, formValues }) => {
+    const { computedAttributes } = fieldParams;
+    const attributes = Object.fromEntries(
+      Object.entries(computedAttributes).map(handleComputedAttribute(logic, formValues, parentID)).filter(([, value]) => value !== null)
+    );
+    return attributes;
+  };
+}
+function handleComputedAttribute(logic, formValues, parentID) {
+  return ([key, value]) => {
+    if (key === "const")
+      return [key, logic.getScope(parentID).applyComputedValueInField(value, formValues)];
+    if (typeof value === "string") {
+      return [key, logic.getScope(parentID).applyComputedValueInField(value, formValues)];
+    }
+  };
 }
 
 // src/yupSchema.js
-var import_flow = __toESM(require("lodash/flow"));
-var import_noop = __toESM(require("lodash/noop"));
-var import_randexp = require("randexp");
-var import_yup = require("yup");
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
 var baseString = (0, import_yup.string)().trim();
 var todayDateHint = (/* @__PURE__ */ new Date()).toISOString().substring(0, 10);
@@ -488,7 +630,7 @@ var getYupSchema = ({ inputType, ...field }) => {
   }
   return yupSchemas[inputType] || yupSchemasToJsonTypes[jsonType];
 };
-function buildYupSchema(field, config) {
+function buildYupSchema(field, config, logic) {
   const { inputType, jsonType: jsonTypeValue, errorMessage = {}, ...propertyFields } = field;
   const isCheckboxBoolean = typeof propertyFields.checkboxValue === "boolean";
   let baseSchema;
@@ -561,6 +703,13 @@ function buildYupSchema(field, config) {
       }) : true
     );
   }
+  function withConst(yupSchema) {
+    return yupSchema.test(
+      "isConst",
+      errorMessage.const ?? errorMessageFromConfig.const ?? `The only accepted value is ${propertyFields.const}.`,
+      (value) => propertyFields.required === false && value === void 0 || value === null || value === propertyFields.const
+    );
+  }
   function withBaseSchema() {
     const customErrorMsg = errorMessage.type || errorMessageFromConfig.type;
     if (customErrorMsg) {
@@ -628,6 +777,14 @@ function buildYupSchema(field, config) {
   if (propertyFields.accept) {
     validators.push(withFileFormat);
   }
+  if (propertyFields.const) {
+    validators.push(withConst);
+  }
+  if (propertyFields.requiredValidations) {
+    propertyFields.requiredValidations.forEach(
+      (id) => validators.push(yupSchemaWithCustomJSONLogic({ field, id, logic, config }))
+    );
+  }
   return (0, import_flow.default)(validators);
 }
 function getNoSortEdges(fields = []) {
@@ -667,50 +824,14 @@ function hasType(type, typeName) {
 function getField(fieldName, fields) {
   return fields.find(({ name }) => name === fieldName);
 }
-function validateFieldSchema(field, value) {
-  const validator = buildYupSchema(field);
+function validateFieldSchema(field, value, logic) {
+  const validator = buildYupSchema(field, {}, logic);
   return validator().isValidSync(value);
 }
 function compareFormValueWithSchemaValue(formValue, schemaValue) {
   const currentPropertyValue = typeof schemaValue === "number" ? schemaValue : schemaValue || void 0;
   return String(formValue) === String(currentPropertyValue);
 }
-function checkIfConditionMatches(node, formValues, formFields) {
-  return Object.keys(node.if.properties).every((name) => {
-    const currentProperty = node.if.properties[name];
-    const value = formValues[name];
-    const hasEmptyValue = typeof value === "undefined" || // NOTE: This is a "Remote API" dependency, as empty fields are sent as "null".
-    value === null;
-    const hasIfExplicit = node.if.required?.includes(name);
-    if (hasEmptyValue && !hasIfExplicit) {
-      return true;
-    }
-    if (hasProperty(currentProperty, "const")) {
-      return compareFormValueWithSchemaValue(value, currentProperty.const);
-    }
-    if (currentProperty.contains?.pattern) {
-      const formValue = value || [];
-      if (Array.isArray(formValue)) {
-        const pattern = new RegExp(currentProperty.contains.pattern);
-        return (value || []).some((item) => pattern.test(item));
-      }
-    }
-    if (currentProperty.enum) {
-      return currentProperty.enum.includes(value);
-    }
-    const field = getField(name, formFields);
-    return validateFieldSchema(
-      {
-        options: field.options,
-        // @TODO/CODE SMELL. We are passing the property (raw field), but buildYupSchema() expected the output field.
-        ...currentProperty,
-        inputType: field.inputType,
-        required: true
-      },
-      value
-    );
-  });
-}
 function isFieldFilled(fieldValue) {
   return Array.isArray(fieldValue) ? fieldValue.length > 0 : !!fieldValue;
 }
@@ -740,7 +861,16 @@ function getPrefillSubFieldValues(field, defaultValues, parentFieldKeyPath) {
       initialValue[field.name] = subFieldValues;
     }
   } else {
-    initialValue = getPrefillValues([field], initialValue);
+    if (typeof initialValue !== "object") {
+      console.warn(
+        `Field "${parentFieldKeyPath}"'s value is "${initialValue}", but should be type object.`
+      );
+      initialValue = getPrefillValues([field], {
+        // TODO nested fieldsets are not handled
+      });
+    } else {
+      initialValue = getPrefillValues([field], initialValue);
+    }
   }
   return initialValue;
 }
@@ -769,7 +899,7 @@ function getPrefillValues(fields, initialValues = {}) {
   });
   return initialValues;
 }
-function updateField(field, requiredFields, node, formValues) {
+function updateField(field, requiredFields, node, formValues, logic, config) {
   if (!field) {
     return;
   }
@@ -791,6 +921,17 @@ function updateField(field, requiredFields, node, formValues) {
       }
     }
   });
+  if (field.getComputedAttributes) {
+    const computedFieldValues = field.getComputedAttributes({
+      field,
+      isRequired: fieldIsRequired,
+      node,
+      formValues,
+      config,
+      logic
+    });
+    updateValues(computedFieldValues);
+  }
   if (field.calculateConditionalProperties) {
     const newFieldValues = field.calculateConditionalProperties(fieldIsRequired, node);
     updateValues(newFieldValues);
@@ -804,33 +945,46 @@ function updateField(field, requiredFields, node, formValues) {
     updateValues(newFieldValues);
   }
 }
-function processNode(node, formValues, formFields, accRequired = /* @__PURE__ */ new Set()) {
+function processNode({
+  node,
+  formValues,
+  formFields,
+  accRequired = /* @__PURE__ */ new Set(),
+  parentID = "root",
+  logic
+}) {
   const requiredFields = new Set(accRequired);
   Object.keys(node.properties ?? []).forEach((fieldName) => {
     const field = getField(fieldName, formFields);
-    updateField(field, requiredFields, node, formValues);
+    updateField(field, requiredFields, node, formValues, logic, { parentID });
   });
   node.required?.forEach((fieldName) => {
     requiredFields.add(fieldName);
-    updateField(getField(fieldName, formFields), requiredFields, node, formValues);
+    updateField(getField(fieldName, formFields), requiredFields, node, formValues, logic, {
+      parentID
+    });
   });
   if (node.if) {
-    const matchesCondition = checkIfConditionMatches(node, formValues, formFields);
+    const matchesCondition = checkIfConditionMatches(node, formValues, formFields, logic);
     if (matchesCondition && node.then) {
-      const { required: branchRequired } = processNode(
-        node.then,
+      const { required: branchRequired } = processNode({
+        node: node.then,
         formValues,
         formFields,
-        requiredFields
-      );
+        accRequired: requiredFields,
+        parentID,
+        logic
+      });
       branchRequired.forEach((field) => requiredFields.add(field));
     } else if (node.else) {
-      const { required: branchRequired } = processNode(
-        node.else,
+      const { required: branchRequired } = processNode({
+        node: node.else,
         formValues,
         formFields,
-        requiredFields
-      );
+        accRequired: requiredFields,
+        parentID,
+        logic
+      });
       branchRequired.forEach((field) => requiredFields.add(field));
     }
   }
@@ -842,12 +996,21 @@ function processNode(node, formValues, formFields, accRequired = /* @__PURE__ */
     node.anyOf.forEach(({ required = [] }) => {
       required.forEach((fieldName) => {
         const field = getField(fieldName, formFields);
-        updateField(field, requiredFields, node, formValues);
+        updateField(field, requiredFields, node, formValues, logic, { parentID });
       });
     });
   }
   if (node.allOf) {
-    node.allOf.map((allOfNode) => processNode(allOfNode, formValues, formFields, requiredFields)).forEach(({ required: allOfItemRequired }) => {
+    node.allOf.map(
+      (allOfNode) => processNode({
+        node: allOfNode,
+        formValues,
+        formFields,
+        accRequired: requiredFields,
+        parentID,
+        logic
+      })
+    ).forEach(({ required: allOfItemRequired }) => {
       allOfItemRequired.forEach(requiredFields.add, requiredFields);
     });
   }
@@ -855,7 +1018,13 @@ function processNode(node, formValues, formFields, accRequired = /* @__PURE__ */
     Object.entries(node.properties).forEach(([name, nestedNode]) => {
       const inputType = getInputType(nestedNode);
       if (inputType === supportedTypes.FIELDSET) {
-        processNode(nestedNode, formValues[name] || {}, getField(name, formFields).fields);
+        processNode({
+          node: nestedNode,
+          formValues: formValues[name] || {},
+          formFields: getField(name, formFields).fields,
+          parentID: name,
+          logic
+        });
       }
     });
   }
@@ -873,11 +1042,11 @@ function clearValuesIfNotVisible(fields, formValues) {
     }
   });
 }
-function updateFieldsProperties(fields, formValues, jsonSchema) {
+function updateFieldsProperties(fields, formValues, jsonSchema, logic) {
   if (!jsonSchema?.properties) {
     return;
   }
-  processNode(jsonSchema, formValues, fields);
+  processNode({ node: jsonSchema, formValues, formFields: fields, logic });
   clearValuesIfNotVisible(fields, formValues);
 }
 var notNullOption = (opt) => opt.const !== null;
@@ -920,11 +1089,15 @@ function extractParametersFromNode(schemaNode) {
   }
   const presentation = pickXKey(schemaNode, "presentation") ?? {};
   const errorMessage = pickXKey(schemaNode, "errorMessage") ?? {};
+  const requiredValidations = schemaNode["x-jsf-logic-validations"];
+  const computedAttributes = schemaNode["x-jsf-logic-computedAttrs"];
+  const decoratedComputedAttributes = getDecoratedComputedAttributes(computedAttributes);
   const node = (0, import_omit.default)(schemaNode, ["x-jsf-presentation", "presentation"]);
   const description = presentation?.description || node.description;
   const statementDescription = containsHTML(presentation.statement?.description) ? wrapWithSpan(presentation.statement.description, { class: "jsf-statement" }) : presentation.statement?.description;
   return (0, import_omitBy.default)(
     {
+      const: node.const,
       label: node.title,
       readOnly: node.readOnly,
       ...node.deprecated && {
@@ -959,6 +1132,8 @@ function extractParametersFromNode(schemaNode) {
       },
       // Handle [name].presentation
       ...presentation,
+      requiredValidations,
+      computedAttributes: decoratedComputedAttributes,
       description: containsHTML(description) ? wrapWithSpan(description, {
         class: "jsf-description"
       }) : description,
@@ -995,8 +1170,8 @@ function yupToFormErrors(yupError) {
   }
   return errors;
 }
-var handleValuesChange = (fields, jsonSchema, config) => (values) => {
-  updateFieldsProperties(fields, values, jsonSchema);
+var handleValuesChange = (fields, jsonSchema, config, logic) => (values) => {
+  updateFieldsProperties(fields, values, jsonSchema, logic);
   const lazySchema = (0, import_yup2.lazy)(() => buildCompleteYupSchema(fields, config));
   let errors;
   try {
@@ -1015,6 +1190,12 @@ var handleValuesChange = (fields, jsonSchema, config) => (values) => {
     formErrors: yupToFormErrors(errors)
   };
 };
+function getDecoratedComputedAttributes(computedAttributes) {
+  return {
+    ...computedAttributes ?? {},
+    ...computedAttributes?.const && computedAttributes?.default ? { value: computedAttributes.const } : {}
+  };
+}
 
 // src/calculateConditionalProperties.js
 function isFieldRequired(node, field) {
@@ -1216,6 +1397,9 @@ function applyFieldsDependencies(fieldsParameters, node) {
       applyFieldsDependencies(fieldsParameters, condition);
     });
   }
+  if (node?.["x-jsf-logic"]) {
+    applyFieldsDependencies(fieldsParameters, node["x-jsf-logic"]);
+  }
 }
 function getCustomPropertiesForField(fieldParams, config) {
   return config?.customProperties?.[fieldParams.name];
@@ -1227,15 +1411,16 @@ function getComposeFunctionForField(fieldParams, hasCustomizations) {
   }
   return composeFn;
 }
-function buildField(fieldParams, config, scopedJsonSchema) {
+function buildField(fieldParams, config, scopedJsonSchema, logic) {
   const customProperties = getCustomPropertiesForField(fieldParams, config);
   const composeFn = getComposeFunctionForField(fieldParams, !!customProperties);
-  const yupSchema = buildYupSchema(fieldParams, config);
+  const yupSchema = buildYupSchema(fieldParams, config, logic);
   const calculateConditionalFieldsClosure = fieldParams.isDynamic && calculateConditionalProperties(fieldParams, customProperties);
   const calculateCustomValidationPropertiesClosure = calculateCustomValidationProperties(
     fieldParams,
     customProperties
   );
+  const getComputedAttributes = Object.keys(fieldParams.computedAttributes).length > 0 && calculateComputedAttributes(fieldParams, config);
   const hasCustomValidations = !!customProperties && (0, import_size.default)((0, import_pick2.default)(customProperties, SUPPORTED_CUSTOM_VALIDATION_FIELD_PARAMS)) > 0;
   const finalFieldParams = {
     // invalid attribute cleanup
@@ -1248,6 +1433,7 @@ function buildField(fieldParams, config, scopedJsonSchema) {
     ...hasCustomValidations && {
       calculateCustomValidationProperties: calculateCustomValidationPropertiesClosure
     },
+    ...getComputedAttributes && { getComputedAttributes },
     // field customization properties
     ...customProperties && { fieldCustomization: customProperties },
     // base schema
@@ -1256,7 +1442,7 @@ function buildField(fieldParams, config, scopedJsonSchema) {
   };
   return composeFn(finalFieldParams);
 }
-function getFieldsFromJSONSchema(scopedJsonSchema, config) {
+function getFieldsFromJSONSchema(scopedJsonSchema, config, logic) {
   if (!scopedJsonSchema) {
     return [];
   }
@@ -1280,11 +1466,11 @@ function getFieldsFromJSONSchema(scopedJsonSchema, config) {
         fields: () => groupArrayFields,
         addFieldText: fieldParams.addFieldText
       };
-      buildField(fieldParams, config, scopedJsonSchema).forEach((groupField) => {
+      buildField(fieldParams, config, scopedJsonSchema, logic).forEach((groupField) => {
         fields.push(groupField);
       });
     } else {
-      fields.push(buildField(fieldParams, config, scopedJsonSchema));
+      fields.push(buildField(fieldParams, config, scopedJsonSchema, logic));
     }
   });
   return fields;
@@ -1295,9 +1481,15 @@ function createHeadlessForm(jsonSchema, customConfig = {}) {
     ...customConfig
   };
   try {
-    const fields = getFieldsFromJSONSchema(jsonSchema, config);
-    const handleValidation = handleValuesChange(fields, jsonSchema, config);
-    updateFieldsProperties(fields, getPrefillValues(fields, config.initialValues), jsonSchema);
+    const logic = createValidationChecker(jsonSchema);
+    const fields = getFieldsFromJSONSchema(jsonSchema, config, logic);
+    const handleValidation = handleValuesChange(fields, jsonSchema, config, logic);
+    updateFieldsProperties(
+      fields,
+      getPrefillValues(fields, config.initialValues),
+      jsonSchema,
+      logic
+    );
     return {
       fields,
       handleValidation,