carefully parse validator string to extract its name and param. Fixes #5

[ValYouW]

Parse validator string so it wont break if the extra data contains colons

[NewOldMax]

Thanks for your work :)
Feel free to use new version

[ValYouW]

Thx.
BTW, do you have an idea now to add validation for checkbox? the example from the README doesn't really work... MaterialUI checkbox can't accept a value property and this lib only validates the value property (https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/ValidatorForm.jsx#L99)

I did this workaround but it will work only if this is the single checkbox in the form...

class Checkbox extends ValidatorComponent {
	constructor(props) {
		super(props);
	}

	componentWillMount() {
		super.componentWillMount();

		// custom rule will have name 'isPasswordMatch'
		ValidatorForm.addValidationRule('isTruthy', (value) => {
			return this.props.checked;
		});
	}

	render() {
		var { errorMessages, validators, requiredError, ...rest } = this.props;
		var { isValid } = this.state;
		var errorMessage = !isValid && this.getErrorMessage();
		return (
			<div>
				<MUICheckbox {...rest} />
				<span style={{fontSize: '12px', color: 'rgb(244, 67, 54)'}}>
					{errorMessage}
				</span>
			</div>
		);
	}
}

export default Checkbox;

[NewOldMax]

I didn't test example from Readme, it's just theoretical, but did you try to use something like

...
export default class CustomCheckboxValidator extends ValidatorComponent {
...
    const { checked } = this.props;
    <Checkbox value={checked} ... />
...
}

?

[NewOldMax]

@ValYouW
Yes, MUI checkbox doesn't have value prop, but you still can pass it, right? And validation library will handle it

import React from 'react';
import { red300 } from 'material-ui/styles/colors';
import Checkbox from 'material-ui/Checkbox';
import { ValidatorComponent } from 'react-material-ui-form-validator';

class CheckboxValidatorElement extends ValidatorComponent {

    render() {
        const { errorMessages, validators, requiredError, ...rest } = this.props;

        return (
            <div>
                <Checkbox
                    {...rest}
                    ref={(r) => { this.input = r; }}
                />
                {this.errorText()}
            </div>
        );
    }

    errorText() {
        const { isValid } = this.state;

        if (isValid) {
            return null;
        }

        const style = {
            right: 0,
            fontSize: '12px',
            color: red300,
            position: 'absolute',
            marginTop: '-25px',
        };

        return (
            <div style={style}>
                {this.getErrorMessage()}
            </div>
        );
    }
}

export default CheckboxValidatorElement;

    componentWillMount() {
        ValidatorForm.addValidationRule('isTruthy', value => value);
    }
...
    <CheckboxValidatorElement
        ...
        validators=['isTruthy']
        errorMessages=['this field is required']
        checked={value}
        value={value}
    />

[ValYouW]

[lol, saw your response only now... :)]
@NewOldMax MUI Checkbox doesn't accept value property, but figured it out, the value property should be passed to CustomCheckboxValidator and not the MUI Checkbox...
So I ended up like so:

This is the custom checkbox:

import React, {PropTypes} from 'react';
import MUICheckbox from 'material-ui/Checkbox';
import { ValidatorForm, ValidatorComponent } from 'react-material-ui-form-validator';

ValidatorForm.addValidationRule('isTruthy', function(value) {
    return !!value;
});

class Checkbox extends ValidatorComponent {
    constructor(props) {
        super(props);
    }

    render() {
        var { errorMessages, validators, requiredError, ...rest } = this.props;
        var { isValid } = this.state;
        var errorMessage = !isValid && this.getErrorMessage();
        return (
            <div>
                <MUICheckbox {...rest} />
                <span style={{fontSize: '12px', color: 'rgb(244, 67, 54)'}}>
                    {errorMessage}
                </span>
            </div>
        );
    }
}

Checkbox.propTypes = {
    value: PropTypes.bool.isRequired
};

export default Checkbox;

And this is how to use it

chkChange(event, isInputChecked) {
    var state = update(this.state, {checked: {$set: isInputChecked}});
    this.setState(state);
}

<Checkbox onCheck={this.chkChange} value={this.state.checked} name="chkTerms" validators={['isTruthy']} errorMessages={['Please accept our terms and conditions']} />