Simple Form Validation
An easy-to-use react-native form validation highly customizable.
With this module you can render an error message and prevent form submission with invalid data.
How to use
Installation
npm install simple-form-validation --save
Basic usage
import SimpleFormValidation from 'simple-form-validation';
class SFVTestComponent extends Component {
constructor(props){
super(props);
this.SFV = new SimpleFormValidation(sfvOptions);
this.SFV.field('email').email().required('Required').valid('Invalid e-mail');
}
state = {
email: ''
}
onButtonPress() {
if( this.SFV.validateSync() ) {
alert('OK, no errors found');
} else {
alert('There are errors');
}
// You can pass the values here too...
// this.SFV.validateSync(this.state);
// The same as .setValues() before .validate()
}
render() {
this.SFV.setValues(this.state);
// OR - this.SFV.field('email').setValue(this.state.email);
return (
<View>
<Text>Enter you e-mail</Text>
<TextInput onChangeText={email=>this.setState({email})}/>
<Button onPress={()=>{this.onButtonPress()}}>
<Text>Press me</Text>
<Button>
{this.SFV.renderError('email')}
</View>
<View>
E-mail has error? { this.SFV.field('email').hasError()
? 'Yes...'
: 'No, all good'}
</View>
);
}
}
How to ...
... check if a number is greater than 5
this.sfv.field('myNumericField').numeric().min(6, 'The number should be >5.');
... check if an email is valid
this.sfv.field('emailField').email().valid('The address you provided is invalid.');
... check if the name was provided
this.sfv.field('nameField').text().required('Name is required.')
... check if a the value matches the regex
this.sfv.field('password').text().regex(/^(asdf)$/, 'You password is too weak.')
... check if a specific field has error
This is useful to style the field with error
this.sfv.field('password').hasError(); // return true/false
See validators.
Advanced use
Options
// This are the default options, you don't need to pass it,
// but you can change if you want.
const sfvOptions = {
justRenderAfterValidate: true,
defaultMessage: '',
displayErrorCallback: text => {
return text;
}
};
this.sfv = new SimpleFormValidation(sfvOptions);
| Option | Description | Default |
|---|---|---|
| justRenderAfterValidate | If false, will render errors as soon as form is shown. If true it will wait until you call .validate() or .validateSync() for the first time. |
true |
| defaultMessage | This message will be passed over validators if you do not provide an default message to the validator | empty |
| displayErrorCallback | This callback is called on .renderError() | text=>{return text;} |
Rendering errors
displayErrorCallback allows you to define you own custom renderer.
Important! If a field has error, but no message was set, a warning will be generated before it's rendered. It will call the renderer callback anyway.
{
displayErrorCallback: text => {
return <Text style={{color: '#d00'}}>{text}</Text>
}
}
Sync validation vs Promise Validation
There's no big difference. Internally, .validate() calls .validateSync().
if ( SFV.validateSync({field: 'value'}) ){
// all good
} else {
// one or more things are wrong...
// SFV.errors hold the list of errors
}
// - OR
SFV.validate({field:'value'}).then(()=>{
// all good
}).catch(errors => {
// one or more things are wrong...
// errors hold the list of errors
});
Custom validators
You can define your own custom validator, to meet your requirements.
class IsNumberOneValidator extends Validator {
isNumberOne(message){
this.addStep(
'isNumberOne', // rule name
v => return v === 1, // rule callback
message // error message
);
}
}
/* *** */
SFV.field('AmINumberOne')
.custom(new IsNumberOneValidator())
.isNumberOne('You shall not pass!');
/* *** */
SFV.renderError('AmINumberOne', 1); //return null
SFV.renderError('AmINumberOne', 2); //return "You shall not pass!"
Reset
You can reset the SFV, if you want.
SFV.reset(); // cleans all fields, rules and errors
Cheat Sheet
Validators
Messages from rules are always optional.
ValidatorNumeric
SFV.field('fieldName')
.numeric(defaultMessage)
.min(minValue, message)
.max(maxValue, message)
ValidatorText
Internally, .regex() uses regex.test(v).
SFV.field('fieldName')
.text(defaultMessage)
.minLength(minLength, message)
.maxLength(maxLength, message)
.regex(regex, message);
ValidatorEmail
ValidatorEmail use the following regex to check if an e-mail is valid or not.
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
SFV.field('fieldName')
.email(defaultMessage)
// const domains = "@hotmail.com"
// const domains = "@hotmail.com,@gmail.com"
// const domains = ['@hotmail.com','@gmail.com']
.notFrom(domains)
//.onlyFrom(domains)
.valid(message);
ValidatorDate
SFV.field('fieldName')
.date(dateFormat, defaultMessage)
.valid(message)
.minAge(age, message)
.maxAge(age, message)
ValidatorCPF
SFV.field('fieldName')
.cpf(defaultMessage)
.valid(message);
Custom Validator
See custom validators.
Contributing
Please create issues and suggest PRs.