Can someone guide me on how to begin creating a promised-based validation system using JavaScript and TypeScript?

Question

Can someone guide me on how to begin creating a promised-based validation system using JavaScript and TypeScript?

In the process of creating a promised-based validation, I initially came up with the following approach:

export namespace Constraints {
  function required(value: any, vm: any, customParams: RequiredParams);
  function minLength(value: any, vm: any, customParams: LengthParams);
  function maxLength(value: any, vm: any, customParams: LengthParams);
}


 const ConstraintsInForm = {
  fields: {
    login: [
      { validator: Constraints .required },      
    ],
    password: [
      { validator: Constraints .required },
events: { onChange: true, onBlur: true },     
    ]
  }
};

I am in need of an example demonstrating how to create my own promised based validation using the provided constraints and field values.

The objective is to ensure flexibility within constraintsInForm so that with just a method call, I can obtain the corresponding errors dynamically.

javascript typescript

Answer 1

Answer №1

Assuming that the functions required, minLength, and maxLength return a boolean value

function required(value: any, vm: any, customParams: RequiredParams); 
function minLength(value: any, vm: any, customParams: LengthParams);
function maxLength(value: any, vm: any, customParams: LengthParams);

One way to create a promise in JavaScript is as follows:

const ConstraintsInForm = {
  fields: {
    login,
    password,
  }
  events,     
};

const FieldPromise = (ConstraintsInForm) => {
  const fields = ConstraintsInForm.fields;

  return new Promise((resolve, reject) => {
    if(required(fields.login) && required(fields.password)){
      // The user has provided login and password
      if(minLength(fields.login) && maxLength(fields.password)){
        // Password meets length constraints
        // Proceed with using the data
        resolve(fields);
      } else {
        reject();
      }
    }
    else {
      reject();
    }
})}

This serves as a clue for implementing something similar in TypeScript

Answer 2

Assuming that the functions required, minLength, and maxLength return a boolean value

function required(value: any, vm: any, customParams: RequiredParams); 
function minLength(value: any, vm: any, customParams: LengthParams);
function maxLength(value: any, vm: any, customParams: LengthParams);

One way to create a promise in JavaScript is as follows:

const ConstraintsInForm = {
  fields: {
    login,
    password,
  }
  events,     
};

const FieldPromise = (ConstraintsInForm) => {
  const fields = ConstraintsInForm.fields;

  return new Promise((resolve, reject) => {
    if(required(fields.login) && required(fields.password)){
      // The user has provided login and password
      if(minLength(fields.login) && maxLength(fields.password)){
        // Password meets length constraints
        // Proceed with using the data
        resolve(fields);
      } else {
        reject();
      }
    }
    else {
      reject();
    }
})}

This serves as a clue for implementing something similar in TypeScript

Can someone guide me on how to begin creating a promised-based validation system using JavaScript and TypeScript?

Answer №1

Similar questions

Change the way a button interacts with a different element

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

issue with visibility of Angular Component

How to customize the color of Navbar pills in Bootstrap 4 to fill the entire height

Incorporating a JavaScript code into my SharePoint master page to automatically deselect a checkbox resulted in updating the page title

Vue js version 2.5.16 will automatically detect an available port

JSP page displaying a table with a text input field named "code" enclosed within <TD> tags

displaying a confirmation alert upon unchecking a checkbox using javascript

Service in Angular2 designed to retrieve JSON data and extract specific properties or nodes from the JSON object

What are the steps necessary to "release" a proprietary Typescript npm package on git?

When making an Ajax post request, the loading indicator may not appear

What other intentions am I forgetting?

What other methods are available to verify null and assign a value?

Angular does not always interpret the value returned from a Promise.all call

Leveraging nodemailer for automated email delivery

Error message received when calling a function within a Vue watcher states "function is not defined"

A guide on downloading and hosting Next.js documentation on your local machine for offline access

Receiving no communication from Express Router

What is the best way to keep a checkbox unchecked after clicking cancel?

React: Managing various browsers and browser tabs to prevent duplicate operations