An input validator built for Reactjs using the awesomeness of valiidator.js
npm install reactjs-input-validatorjsx
validator="isEmail" required
label="Email" name="email" placeholder="Email"
/>
`
!Email validation
$3
`
yarn add reactjs-input-validator
`
`
npm install reactjs-input-validator --save
`
$3
To use reactjs-input-validator in your react app, you should import it first.`js
// ES6
import { Field } from 'reactjs-inpupt-validator';
// or in ES5
var Field = require('reactjs-input-validator');
`
$3
Finally, you need to link bootstrap to your application.
`html
// index.html
`
$3
| Name | Type | Default | Description |
| --------------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | form-control | Base CSS class for the component. Generally one should only change className to provide new, non-Bootstrap, CSS styles for a component. |
| id | string | | Sets id for the input field. || label | string | | Calls [email, password, text, color, date, datetime-local, month, number, range, hidden, search, tel, url, week]
Not supported types: [button, checkbox, file, image, radio, reset, submit, time] |
| validator | string | | One of the validators from [validator.js][validatorjs-website]
["contains", "equals", "isAfter", "isAlpha", "isAlphanumeric", "isAscii", "isBase64", "isBefore", "isBoolean", "isByteLength", "isCreditCard", "isCurrency", "isDataURI", "isDecimal", "isDivisibleBy", "isEmail", "isEmpty", "isFQDN", "isFloat", "isFullWidth", "isHalfWidth", "isHash", "isHexColor", "isHexadecimal", "isIP", "isISBN", "isISIN", "isISO31661Alpha2", "isISO8601", "isISRC", "isISSN", "isIn", "isInt", "isJSON", "isLatLong", "isLength", "isLowercase", "isMACAddress", "isMD5", "isMimeType", "isMobilePhone", "isMongoId", "isMultibyte", "isNumeric", "isPort", "isPostalCode", "isSurrogatePair", "isURL", "isUUID", "isUppercase", "isVariableWidth", "isWhitelisted", "matches"] |
| validatorErrMsg | string | | Custom error message if validator validation fails. |$3
https://srikanthbandaru.github.io/reactjs-input-validator/
`js
import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Field, formInputData, formValidation } from 'reactjs-input-validator';
export default class App extends Component {
constructor() {
super();
this.state = {
data: {},
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event, inputValue, inputName, validationState, isRequired) {
const value = (event && event.target.value) || inputValue;
const { data } = this.state;
data[inputName] = { value, validation: validationState, isRequired };
this.setState({
data,
});
// if you want access to your form data
const formData = formInputData(this.state.data); // eslint-disable-line no-unused-vars
// tells you if the entire form validation is true or false
const isFormValid = formValidation(this.state.data); // eslint-disable-line no-unused-vars
}
handleSubmit(event) {
event.preventDefault();
const isFormValid = formValidation(this.state.data);
if (isFormValid) {
// do anything including ajax calls
this.setState({ callAPI: true });
} else {
this.setState({ callAPI: true, shouldValidateInputs: !isFormValid });
}
}
render() {
const passwordValue = this.state.data.password && this.state.data.password.value;
return (
);
}
}``MIT. Copyright 2018 (c) Srikanth Bandaru.
[react-website]: https://reactjs.org
[validatorjs-website]: https://github.com/chriso/validator.js