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

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

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

Answer 2

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
}

Answer 3

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>

Answer 4

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.