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

问题

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

回答1:

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).

回答2:

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>

回答3:

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.

来源：https://stackoverflow.com/questions/48974846/error-using-validate-js-on-react-native-unknown-validator-minimum

标签

reactjs

validation

react-native

Validate.js