Error using validate.js on React Native - Unknown validator minimum

Question

I am using validate.js from http://validatejs.org/ on react native log in screen.

import React, { Component } from 'react';

import { 
  View, 
  Text, 
  TextInput, 
  TouchableOpacity } from 'react-native';

// Validate.js validates your values as an object
import validate from 'validate.js'

const constraints = {
  email: {
    presence: {
      message: "Cannot be blank."
    },
    email: {
      message: 'Please enter a valid email address'
    }
  },
  password: {
    presence: {
      message: "Cannot be blank."
    },
    length: {
      minimum: 5,
      message: 'Your password must be at least 5 characters'
    }
  }
}


const validator = (field, value) => {
  // Creates an object based on the field name and field value
  // e.g. let object = {email: 'email@example.com'}
  let object = {}
  object[field] = value

  let constraint = constraints[field]
  console.log(object, constraint)

  // Validate against the constraint and hold the error messages
  const result = validate(object, constraint)
  console.log(object, constraint, result)

  // If there is an error message, return it!
  if (result) {
    // Return only the field error message if there are multiple
    return result[field][0]
  }

  return null
}


export default class Login extends Component {
  state = {
    email: '',
    emailError: null,
    password: '',
    passwordError: null,
  }
  logIn = () => {
    let { email, password } = this.state;
    console.log( email, password)

    let emailError = validator('email', email)
    let passwordError = validator('password', password)
    console.log( emailError, passwordError)
    this.setState({
      emailError: emailError,
      passwordError: passwordError,
    })
  }
  render() {

    const {emailError, passwordError } = this.state

    return (
        <View>

          <TextInput 
            onChangeText={(email) => this.setState({email})} 
            placeholder="Email Address" 
            keyboardType='email-address'
            autoCapitalize='none'
            />
          <Text> {emailError ? emailError : null }</Text>

          <TextInput 
            onChangeText={(password) => this.setState({password})} 
            placeholder="Password" 
            secureTextEntry={true}
            autoCapitalize='none'
            type="password" 
            />
          <Text> {passwordError ? passwordError : null }</Text>

        <TouchableOpacity onPress={this.logIn}>
          <Text>LOG IN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Running the code above logs the following and throws an error "Unknown validator message"

.. I ReactNativeJS: 't@t.cl', 'j'
.. I ReactNativeJS: { email: 't@t.cl' }, { presence: { message: 'Cannot be blank.' },
.. I ReactNativeJS:   email: { message: 'Please enter a valid email address' } }
.. E ReactNativeJS: Unknown validator message

score 4 · Accepted Answer · answered Feb 25 '18 at 15:51

4

Your validate call is wrong. It should be:

const result = validate(object, { [field]: constraint })

Note that your object is:

{email: ...}

therefore the constraints passed to validation also need to be of the following form:

{email: emailConstraints }

What happens is that the validator looks into email and looks for validators (constraints) there but what it finds is only message and it prints

Unknown validator "message"

("message" being the name of the unknown constraint).

answered Feb 25 '18 at 15:51

Sulthan

128,090
22
218
270

Thank you! Its exactly what I was missing! – Timothy Feb 25 '18 at 16:29
@TechyTimo It would be probably easier to understand if the error message contained the quotes around `message` :) – Sulthan Feb 25 '18 at 16:35
True. It was confusing. – Timothy Feb 25 '18 at 16:54
Sulthan please add corrected code with exmaple code in the question. then it is more helping . Thanks in advance – Arun Kumar P Jan 01 '19 at 15:58

score 1 · Answer 2 · answered Jan 16 '20 at 06:25

Try this instead, I have changed in below function and it works.

const validator = (field, value) => {

      // Creates an object based on the field name and field value
      // e.g. let object = {email: 'email@example.com'}
      let object = new Object()
      object[field] = value

      let constraint = new Object()
      constraint[field] = constraints[field]
      console.log(object, constraint)

      // Validate against the constraint and hold the error messages
      const result = validate({}, constraint)//
      if (value != '' && value != null) {//if null value it will return with the presence validation
         result = validate(object, constraint)
      }

      // If there is an error message, return it!
      if (result) {
        // Return only the field error message if there are multiple
        return result[field][0]
      }

      return null
    }

score 0 · Answer 3 · edited Nov 12 '19 at 19:01

0

I managed to make it work by making it like this:

let emailConstraints;

<TextInput 
            onChangeText={(emailConstraints) => this.setState({email: emailConstraints })} 
            placeholder="Email Address" 
            keyboardType='email-address'
            autoCapitalize='none'
            />
<Text> {emailError ? emailError : null }</Text>

edited Nov 12 '19 at 19:01

Paul Roub

36,322
27
84
93

answered Nov 12 '19 at 18:42

Galatanu Adrian

1
1

score 0 · Answer 4 · answered Dec 07 '19 at 11:19

I had this specific problem but I could tell what the issue was. My error was Unknown validator checked. The problem is indicated by the word checked in that error message. It means that the attribute checked(in my case) and minimum(in your case) is used in a wrong place in the json of constraints. OR, it is in the right json block but one or many of the other attributes in that block should not be there and the validate.js parser reports the error using the first attribute in that block regardless of it being in the correct one. I had this

policy: {
presence: true,
checked: true}

for checkbox validation, but the library does not allow unknown attributchecked in that block. In your case, I think the message attribute should not be in the length block but validate.js reports the error using the first attribute minimum in that block which is otherwise in the right place. So you should possibly consider removing message attribute and things will be fine.

Error using validate.js on React Native - Unknown validator minimum

4 Answers4