`validate.js verifying the elements within an array`

Question

`validate.js verifying the elements within an array`

One of the challenges I'm facing in my JavaScript project is dealing with objects that have two array properties included. As part of my development process, I've decided to utilize the resources provided by the validate.js library.

To illustrate, let's take a look at an example:

var customer = {
   name: 'Ted',
   address: 'some address',
   friends: ['Michelle','Elon'],
   purchases: [{ qty:1, goods: 'eggs'}, { qty:2, goods: 'apples'}]
}

Currently, I am seeking to implement validation for the following criteria:

Ensure that the array of friends only consists of string elements.
Validate that the array of purchases includes between 1 and 5 entries while also confirming that the quantity (qty) field is always numeric.

I would appreciate guidance on how to accomplish this using validate.js.

javascript arrays validation

Answer 1

Answer №1

If you want to create a personalized validator, you can develop a custom validation method named array:

import validate from 'validate.js/validate'
import isEmpty from 'lodash-es/isEmpty'

validate.validators.array = (arrayItems, itemConstraints) => {
  const arrayItemErrors = arrayItems.reduce((errors, item, index) => {
    const error = validate(item, itemConstraints)
    if (error) errors[index] = { error: error }
    return errors
  }, {})

  return isEmpty(arrayItemErrors) ? null : { errors: arrayItemErrors }
}

To implement this custom validator, follow these steps:

const customerConstraints = {
  purchases: {
    array: {
      qty: {
        numericality: {
          onlyInteger: true,
          greaterThan: 0,
          lessThanOrEqualTo: 5
        }
      }
    }
  }
}

const customerErrors = validate(customer, customerConstraints)

When looping through the customer.purchases array in your code, you can check for any errors in purchase items using

customerErrors.purchases.errors[index].error.qty

Answer 2

If you want to create a personalized validator, you can develop a custom validation method named array:

import validate from 'validate.js/validate'
import isEmpty from 'lodash-es/isEmpty'

validate.validators.array = (arrayItems, itemConstraints) => {
  const arrayItemErrors = arrayItems.reduce((errors, item, index) => {
    const error = validate(item, itemConstraints)
    if (error) errors[index] = { error: error }
    return errors
  }, {})

  return isEmpty(arrayItemErrors) ? null : { errors: arrayItemErrors }
}

To implement this custom validator, follow these steps:

const customerConstraints = {
  purchases: {
    array: {
      qty: {
        numericality: {
          onlyInteger: true,
          greaterThan: 0,
          lessThanOrEqualTo: 5
        }
      }
    }
  }
}

const customerErrors = validate(customer, customerConstraints)

When looping through the customer.purchases array in your code, you can check for any errors in purchase items using

customerErrors.purchases.errors[index].error.qty

`validate.js verifying the elements within an array`

Answer №1

Similar questions

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Identifying when a user is idle on the browser

Develop a JavaScript application that contains a collection of strings, and efficiently sorts them with a time complexity of O(nlog n)

Ajax: client dilemma created by the interaction of two functions

Tips for creating unique names for JSON data modification functions

Generate barcodes using Angular 2

Troubleshooting Query Param Problems in EmberJS Route Navigation

I am interested in using the split method to separate and then mapping an object in JavaScript

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

Exploring the functionalities of the componentDidUpdate() method in React JS

Display a loading progress bar with jQuery AJAX as your single page website content loads

Showing a div with 2 unique data attributes - such as displaying Currency and Quantity

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Difficulty in adding a simple return to render an array in React for list creation

Having trouble accessing portlet resource URL from JavaScript in Liferay 6.2

Is there a way to generate bootstrap divs by parsing csv text?

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

PHP: Verifying the authenticity of names in multiple languages

What is the most efficient way to align a localStorage variable with its corresponding page?