email validation issue about react-material-ui-form-validator HOT 22 CLOSED

It's just a rude example, not real code, just shows how to work with this library.
Btw I don't have this error with example from readme.

from react-material-ui-form-validator.

Try to add

this.state = {
    email: '',
};

into constructor

from react-material-ui-form-validator.

@NewOldMax - this the first thing I tried...didn't work
what do I missing? it is react or the library issue?

from react-material-ui-form-validator.

Here is correct code 100% working, I test it right now:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';

class SomeForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
        };

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        const email = event.target.value;
        this.setState({ email });
    }

    handleSubmit() {
        // your submit logic
    }

    render() {
        const { email } = this.state;
        return (
            <ValidatorForm
                ref="form"
                onSubmit={this.handleSubmit}
            >
                <TextValidator
                    floatingLabelText="Email"
                    onChange={this.handleChange}
                    name="email"
                    value={email}
                    validators={['required', 'isEmail']}
                    errorMessages={['this field is required', 'email is not valid']}
                />
                <RaisedButton type="submit" label="submit" />
            </ValidatorForm>
        );
    }
}

export default SomeForm;

Check that your code isn't missing anything.
And what React version you have?

from react-material-ui-form-validator.

still the same 😞
react 15.5.4

from react-material-ui-form-validator.

Do you have 'prop-types' library in your project?

from react-material-ui-form-validator.

yes. with a version of 15.5.10

from react-material-ui-form-validator.

Can you provide your full code? Not for this component, but for parent component

from react-material-ui-form-validator.

sure.
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Login from './Login';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
  <MuiThemeProvider><Login/></MuiThemeProvider>
  , document.getElementById('root'));

Login.js

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';


const style = {
  margin: 12,
};

class Login extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      email: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    const email = event.target.value;
    this.setState({ email });
  }

  handleSubmit() {
    // your submit logic
  }
  render() {
    const { email } = this.state;
    return (
    <ValidatorForm
      ref="form"
      onSubmit={this.handleSubmit}>
      <TextValidator
        floatingLabelText="Email"
        onChange={this.handleChange}
        name="email"
        value={email}
        validators={['required', 'isEmail']}
        errorMessages={['this field is required', 'email is not valid']}
      />
      <RaisedButton type="submit" label="login" className="button-submit" primary={true}/>
      <RaisedButton label="Register" secondary={true} style={style}/>
    </ValidatorForm>
    );
  }
}

export default Login;

from react-material-ui-form-validator.

I tried also not to use prop-types.still the same

from react-material-ui-form-validator.

Your code works without any errors for me. Maybe you have some issue in node_modules, try to reinstall packages.

from react-material-ui-form-validator.

still the same after rm -rf node_modules and install them all over with yarn.
maybe it's the material-ui version(0.18.1)?

from react-material-ui-form-validator.

I have it and all works fine

from react-material-ui-form-validator.

Try to install with npm, not yarn

from react-material-ui-form-validator.

also with npm. I also tested on multiple browsers.
this is all the dependencies I'm using:

    "material-ui": "^0.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "next",
    "react-material-ui-form-validator": "^0.3.1",
    "react-tap-event-plugin": "^2.0.1"

from react-material-ui-form-validator.

Did you try without react-hot-loader?
Do you use babel?

from react-material-ui-form-validator.

I use https://github.com/auth0/react-browserify-spa-seed to create projects

from react-material-ui-form-validator.

also without react-hot-loader. I'm using neutrino.js

from react-material-ui-form-validator.

I think your issue is related to your environment, not to react or this library.
You are the first with this such of issue during all time.

from react-material-ui-form-validator.

Can you create some other form component, without this library?

from react-material-ui-form-validator.

As I see neutrino has several issues with react setState which not fixed yet, so I think it's your case

from react-material-ui-form-validator.

@NewOldMax you are right.
I found this also neutrinojs/neutrino#172 that including a workaround that fixes the issue.

now it works great!

from react-material-ui-form-validator.