Created
August 11, 2015 01:47
-
-
Save phanngoc/692145fe4a87e3b6569a to your computer and use it in GitHub Desktop.
reacjs : submit form validate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv='Content-type' content='text/html; charset=utf-8'> | |
| <title>Test index5 React js</title> | |
| <script type="text/javascript" src="jquery.js"></script> | |
| <script src="react/build/react.js"></script> | |
| <script src="react/build/JSXTransformer.js"></script> | |
| </head> | |
| <body> | |
| <div id="mount-point"> | |
| </div> | |
| <script type="text/jsx"> | |
| var Label = React.createClass({ | |
| render : function() | |
| { | |
| return <label className="foo" htmlFor={this.props.name}>{this.props.title}</label> | |
| }, | |
| }); | |
| var TextField = React.createClass({ | |
| getInitialState : function(){ | |
| return {messages : ['','Your input not empty','Your input cannot less 2 character','You must fill charactor [a-z]'],poserror : 0} | |
| }, | |
| render : function() | |
| { | |
| return <div><input name={this.props.name} ref={this.props.name} onBlur={this.checkValue} ></input><p className='error'>{this.state.messages[this.state.poserror]}</p></div> | |
| }, | |
| componentDidMount: function() { | |
| }, | |
| checkValue : function(e) | |
| { | |
| var value = React.findDOMNode(this.refs[this.props.name]).value; | |
| if(value == "") | |
| { | |
| this.setState({poserror: 1}); | |
| this.props.countError(); | |
| } | |
| } | |
| }); | |
| var Form = React.createClass({ | |
| getInitialState : function(){ | |
| return { countError : 0 }; | |
| }, | |
| handleSubmit : function(e){ | |
| if(this.state.countError > 0) | |
| { | |
| e.preventDefault(); | |
| } | |
| else | |
| { | |
| console.log('ok ne'); | |
| } | |
| }, | |
| countError : function() | |
| { | |
| console.log("countError"); | |
| this.setState({countError : this.state.countError+1}); | |
| }, | |
| render : function() | |
| { | |
| return ( | |
| <div> | |
| <h3>TODO</h3> | |
| <form onSubmit={this.handleSubmit}> | |
| <Label name={'username'} title={'username'} /> | |
| <TextField name={'username'} countError={this.countError}>value username</TextField> | |
| <button>OK</button> | |
| </form> | |
| </div> | |
| ); | |
| } | |
| }); | |
| React.render(<Form /> , document.getElementById('mount-point')); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment