Simple React Components for form validation. Based on HTML5 Constraint validation API and Bootstrap4 style. 

cihanghu

react-bootstrap4-form-validation

Object.defineProperty(exports, "__esModule", {

exports.ValidationForm = exports.Checkbox = exports.SelectGroup = exports.FileInput = exports.Radio = exports.TextInputGroup = exports.TextInput = exports.BaseFormControl = undefined;

var _react2 = _interopRequireDefault(_react);

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

    var unit = size.match(/[a-zA-Z]+/)[0];

            return 1024 * 1024 * 1024 * num;

            throw new Error("Unknown unit " + unit);

var BaseFormControl = exports.BaseFormControl = function (_React$Component) {

    _inherits(BaseFormControl, _React$Component);

        _classCallCheck(this, BaseFormControl);

        var _this = _possibleConstructorReturn(this, (BaseFormControl.__proto__ || Object.getPrototypeOf(BaseFormControl)).call(this, props));

        _this.setError = function (errorMessage) {

            _this.getInputRef().setCustomValidity(errorMessage);

            _this.setState({ errorMessage: errorMessage });

        _this.checkError = function (e) {

            var isPristine = _this.state.isPristine;

            if (isPristine) _this.setDirty();

            _this.changeInputErrorClass();

        _this.handleBlur = function (e) {

            if (_this.context.validationForm.immediate) return;

        _this.handleChange = function (e) {

            if (_this.props.onChange) _this.props.onChange(e);

            if (!_this.context.validationForm.immediate) return;

        _this.validateInput = function () {

            _this.setState({ isPristine: false });

        _this.filterProps = function () {

            return _react2.default.createElement(

                _react2.default.Fragment,

                multiline ? _react2.default.createElement('textarea', _extends({ className: this.props.className }, domProps, { ref: this.inputRef, onChange: this.handleChange, onBlur: this.handleBlur })) : _react2.default.createElement('input', _extends({ className: this.props.className }, domProps, { ref: this.inputRef, onChange: this.handleChange, onBlur: this.handleBlur })),

                this.displayErrorMessage(),

                this.displaySuccessMessage()

TextInput.defaultProps = _extends({}, BaseFormControl.defaultProps, {

var TextInputGroup = exports.TextInputGroup = function (_BaseFormControl2) {

    _inherits(TextInputGroup, _BaseFormControl2);

        _classCallCheck(this, TextInputGroup);

        return _possibleConstructorReturn(this, (TextInputGroup.__proto__ || Object.getPrototypeOf(TextInputGroup)).apply(this, arguments));

            var props = this.filterProps();

                inputGroupClassName = props.inputGroupClassName,

                inputGroupStyle = props.inputGroupStyle,

                domProps = _objectWithoutProperties(props, ['prepend', 'append', 'inputGroupClassName', 'inputGroupStyle']);

                { className: inputGroupClassName, style: inputGroupStyle },

                prepend && _react2.default.createElement(

                    { className: 'input-group-prepend' },

                _react2.default.createElement('input', _extends({}, domProps, { className: this.props.className, ref: this.inputRef, onChange: this.handleChange, onBlur: this.handleBlur })),

                append && _react2.default.createElement(

                    { className: 'input-group-append' },

TextInputGroup.defaultProps = _extends({}, BaseFormControl.defaultProps, {

    className: _propTypes2.default.string,

    inputGroupClassName: _propTypes2.default.string,

    inputGroupStyle: _propTypes2.default.object,

    prepend: _propTypes2.default.element,

var RadioGroup = function (_BaseFormControl3) {

    _inherits(RadioGroup, _BaseFormControl3);

        _classCallCheck(this, RadioGroup);

        return _possibleConstructorReturn(this, (RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).apply(this, arguments));

            var inputRef = window.document.querySelectorAll('[name="' + this.props.name + '"]')[0];

        value: function mapRadioItems() {

            return _react2.default.Children.map(this.props.children, function (child) {

                if (typeof child.type !== "function" || child.type.name !== RadioItem.name) {

                    console.warn("Only RadioItem is allowed inside RadioGroup");

                return _react2.default.cloneElement(child, _extends({}, child.props, {

                    inline: _this5.props.inline,

                    name: _this5.props.name,

                    required: _this5.props.required,

                    defaultValue: _this5.props.defaultValue,

  "name": "react-bootstrap4-form-validation",

  "description": "Simple React Components for form validation. Based on HTML5 Constraint validation API and Bootstrap4 style.",

    "start": "concurrently \"npm run lib:watch\" \"npm run docs\"",

    "lib": "babel src/lib -d lib --copy-files",

    "lib:watch": "babel src/lib -w -d lib --copy-files",

    "docs": "webpack-dev-server --mode development",

    "docs:prod": "webpack --mode production",

    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",

    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",

  "author": "Cihang Hu <cihanghu@gmail.com>",

  "homepage": "https://github.com/andyhu92/react-bootstrap4-form-validation",

  "bug": "https://github.com/andyhu92/react-bootstrap4-form-validation/issues",

    "url": "https://github.com/andyhu92/react-bootstrap4-form-validation",

![sheild](https://img.shields.io/github/issues/andyhu92/react-bootstrap4-form-validation.svg)

![sheild](https://img.shields.io/github/license/andyhu92/react-bootstrap4-form-validation.svg)

React components for [HTML5 Constraint validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) and [Bootstrap4](http://getbootstrap.com/) form components.

If you happen to use React, Bootstrap4 and want to add some validation to your form without too much effort, this is just for you :D

`npm install react-bootstrap4-form-validation --save`

`git clone https://github.com/andyhu92/react-bootstrap4-form-validation.git`

https://andyhu92.github.io/react-bootstrap4-form-validation/#/

		@@ -271,3 +271,3 @@ 'use strict';
		return _react2.default.createElement(
		'div',
		_react2.default.Fragment,
		null,
		@@ -274,0 +274,0 @@ multiline ? _react2.default.createElement('textarea', _extends({ className: this.props.className }, domProps, { ref: this.inputRef, onChange: this.handleChange, onBlur: this.handleBlur })) : _react2.default.createElement('input', _extends({ className: this.props.className }, domProps, { ref: this.inputRef, onChange: this.handleChange, onBlur: this.handleBlur })),

		{
		"name": "react-bootstrap4-form-validation",
		"version": "1.0.9",
		"version": "1.0.10",
		"description": "Simple React Components for form validation. Based on HTML5 Constraint validation API and Bootstrap4 style.",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

Worsened metrics