@upendradevsingh/webcore/docs/src/components/FormField/EmailField/EmailField.js

UI Core Components for web

"use strict";
import React from 'react';

class EmailField extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			value : this.props.defaultEmail,
			className : "form-group email-input"
		};

	}

	validateEmail(e) {
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    	var currentClass = this.state.className;

    	if (!re.test(e.target.value)) {
    		currentClass = currentClass + " error";
    	} else {
    		currentClass = currentClass.replace("error", "");
    	}
    	
    	if (e.target.value == "") {
    		currentClass = currentClass.replace("focused", "");
    	} 

    	this.setState({
			value : e.target.value,
			className : currentClass
		})
	}

	handleChange(event) {
	    this.setState({
			value : event.target.value
		})
	    if(this.props.onChange) {
	      this.props.onChange(event);
	    }
	 }

	handleFocus(event) {
	 	var currentClass = this.state.className;
	 	this.setState({
	 		className: currentClass + " focused"
	 	})
	}


	render() {
		return (
		  <div className={this.state.className}>
		  <label for="login-email">Email</label>
		  <input type="email" name="email" onFocus={this.handleFocus.bind(this)} value={this.state.value} onChange={this.handleChange.bind(this)} onBlur={this.validateEmail.bind(this)} className="form-control" data-rule="email" />
		  </div>	
		)
	}
}

export default EmailField;