email validation pattern react

Solutions on MaxInterview for email validation pattern react by the best coders in the world

Search
showing results for - "email validation pattern react"
Pacome
20 Mar 2018
1 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
source
Jonas
14 Jan 2020
1import React from 'react';
2import {sendFormData} from '../services/';
3
4class Signup extends React.Component{
5  constructor(props){
6    super(props);
7     this.state = {
8       isDisabled:true
9     }                                                                                                 
10     this.submitForm = this.submitForm.bind(this);
11  }
12  validateEmail(email){
13   const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][a-z]{3,9}[\.][a-z]{2,5}/g;
14   const result = pattern.test(email);
15   if(result===true){
16     this.setState({
17       emailError:false,
18       email:email
19     })
20   } else{
21     this.setState({
22       emailError:true
23     })
24   }
25 }
26 handleChange(e){
27  const target = e.target;
28  const value = target.type === 'checkbox' ? target.checked : target.value;
29  const name = target.name;
30  this.setState({
31    [name]: value
32  });
33  if(e.target.name==='firstname'){
34    if(e.target.value==='' || e.target.value===null ){
35      this.setState({
36        firstnameError:true
37      })
38    } else {
39      this.setState({
40        firstnameError:false,     
41        firstName:e.target.value
42      })
43    }
44  }
45  if(e.target.name==='lastname'){
46    if(e.target.value==='' || e.target.value===null){
47      this.setState({
48        lastnameError:true
49      })
50    } else {
51      this.setState({
52        lastnameError:false,
53        lastName:e.target.value
54      })
55    }
56  }
57  if(e.target.name==='email'){
58   this.validateEmail(e.target.value);
59  }
60  if(e.target.name==='password'){
61    if(e.target.value==='' || e.target.value===null){
62      this.setState({
63        passwordError:true
64      })
65    } else {
66      this.setState({
67        passwordError:false,
68        password:e.target.value
69      })
70    }
71 }
72 if(this.state.firstnameError===false && this.state.lastnameError===false && 
73  this.state.emailError===false && this.state.passwordError===false){
74    this.setState({
75      isDisabled:false
76    })
77 }
78}
79submitForm(e){
80  e.preventDefault();
81  const data = {
82   firstName: this.state.firstName,
83   lastName: this.state.lastName,
84   email: this.state.email,
85   password: this.state.password
86  }
87  sendFormData(data).then(res=>{
88    if(res.status===200){
89      alert(res.data);
90      this.props.history.push('/');
91    }else{
92
93    } 
94  });
95 }
96render(){
97return(
98  <div className="container">
99    <div className="card card-login mx-auto mt-5">
100      <div className="card-header">Register here</div>
101        <div className="card-body">
102            <form id="signup-form">
103              <div className="form-group">
104                <div className="form-label-group">
105                  <input type="text" id="firstname" name="firstname" className="form-control" placeholder="Enter firstname" onChange={(e)=>{this.handleChange(e)}} />
106                  <label htmlFor="firstname">firstname</label>
107                  {this.state.firstnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''} 
108                </div>
109              </div>
110              <div className="form-group">
111                <div className="form-label-group">
112                  <input type="text" id="lastname" name="lastname" className="form-control" placeholder="Enter lastname" onChange={(e)=>{this.handleChange(e)}} />
113                  <label htmlFor="lastname">lastname</label>
114                  {this.state.lastnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''}
115                </div>
116              </div>
117              <div className="form-group">
118                <div className="form-label-group">
119                  <input type="email" id="email" name="email" className="form-control" placeholder="Enter your email" onChange={(e)=>{this.handleChange(e)}} />
120                  <label htmlFor="email">email</label>
121                  {this.state.emailError ? <span style={{color: "red"}}>Please Enter valid email address</span> : ''}
122                </div>
123              </div>                
124              <div className="form-group">
125                <div className="form-label-group">
126                  <input type="password" id="password" name="password" className="form-control" placeholder="Password" onChange={(e)=>{this.handleChange(e)}} />
127                  <label htmlFor="password">Password</label>
128                  {this.state.passwordError ? <span style={{color: "red"}}>Please enter some   value</span> : ''}
129                </div>
130              </div>                
131              <button className="btn btn-primary btn-block" disabled={this.state.isDisabled} onClick={this.submitForm}>Signup</button>
132            </form>
133        </div>
134      </div>
135    </div>
136  );
137 }
138}
139export default Signup;
140
source
Gabriel
29 Feb 2016
1if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
2
source
Farley
12 Mar 2017
1    class Test extends React.Component {
2        constructor(props){
3           super(props);
4      
5           this.state = {
6               fields: {},
7               errors: {}
8           }
9        }
10    
11        handleValidation(){
12            let fields = this.state.fields;
13            let errors = {};
14            let formIsValid = true;
15
16            //Name
17            if(!fields["name"]){
18               formIsValid = false;
19               errors["name"] = "Cannot be empty";
20            }
21      
22            if(typeof fields["name"] !== "undefined"){
23               if(!fields["name"].match(/^[a-zA-Z]+$/)){
24                  formIsValid = false;
25                  errors["name"] = "Only letters";
26               }        
27            }
28       
29            //Email
30            if(!fields["email"]){
31               formIsValid = false;
32               errors["email"] = "Cannot be empty";
33            }
34      
35            if(typeof fields["email"] !== "undefined"){
36               let lastAtPos = fields["email"].lastIndexOf('@');
37               let lastDotPos = fields["email"].lastIndexOf('.');
38
39               if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
40                  formIsValid = false;
41                  errors["email"] = "Email is not valid";
42                }
43           }  
44
45           this.setState({errors: errors});
46           return formIsValid;
47       }
48        
49       contactSubmit(e){
50            e.preventDefault();
51
52            if(this.handleValidation()){
53               alert("Form submitted");
54            }else{
55               alert("Form has errors.")
56            }
57      
58        }
59    
60        handleChange(field, e){         
61            let fields = this.state.fields;
62            fields[field] = e.target.value;        
63            this.setState({fields});
64        }
65    
66        render(){
67            return (
68                <div>           
69                   <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}>
70                        <div className="col-md-6">
71                          <fieldset>
72                               <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/>
73                               <span style={{color: "red"}}>{this.state.errors["name"]}</span>
74                              <br/>
75                             <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>
76                             <span style={{color: "red"}}>{this.state.errors["email"]}</span>
77                             <br/>
78                             <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/>
79                             <br/>
80                             <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/>
81                             <br/>
82                         </fieldset>
83                      </div>
84          
85                  </form>
86                </div>
87          )
88        }
89    }
90
91    React.render(<Test />, document.getElementById('container'));
92
93
similar questions
how to do email validation using regular expression in typescripthow to validate email address in typescript
queries leading to this page
email validation angular jsregex for email validation reactjsregex angular email validation pattern reactive formangular reactive form email regex validationcustom email validation reactjsregex for email validation in angularvalidate form email reactangular email match validationemail pattern validation in angular 8 reactive formreact js onchange email validationangular email more validationangular 8 email validation pattern in formly fieldreact validate emailemail validation pattern angularemail input validation reactvalidating email in angularreact check for valid emailreact js validate emailangular 7 email validation patternemail validate reactemail regex reactangualr form validator on emailemail validator angular 10trigger email validator form control groupconfigure angular email validator validators email angularckeck for email validation reactangular validateemail 28 29 regex not workingemail validation in react js using functional componenttemplate driven form angular validation tutorilavalidators email regex angularshow the email in the form email in angularangular signup form validationemail pattern validation angularemail validation using angular jsangular form email patternemail validation check in react jsangular check email formatemail id validation in react jsemail validator pattern angularhow to validate email in anguklarhow to add email validation in react jsemail regex in reactemail id validation in reactive from angular 10angular reactive forms email validation patternemail validation angular 9angular validate form emailemail custom validation reactvalidate email angular 8email regex validation reactangular 8 email validation patternreact email validatorangular email validator regexangular confirm email validationangular form validation emailemail validation in angular email validation regex angularemail validation in react js using hooksemail validation regular expression input angularemail input format validation in angular 10email angular validatoremail 3a new formcontrol 28 27 27 2c add email validtion 27email validations reactangular 11 email validation pattern exemail and confirm email validation in angular 6regex to validate email only angularvalidators email angularemail input verify reactangular 6 email validation exampleangular form check if valid emailangular emailvalidator checkinput type email validation angularangular email validation patternemail verification in react jsvalid email react js functioncreate a custom validator email angular 5bformcontrol 5d 3d 22email 22react email validation regexcheck email validation in javascript in angularemail id validation angular 9input type email react 5cemail regex angular formcontrolcustom validator email in angular 11angular template form email patternts mail suffix validationemail input validator reactform email validation angularangular validator emailvalidation email while typing in react inputangular regular expression for emailhow to validate email validation in angular 8built in email validation angular 8email validation in angular 11how to add validators for email angularvalidator pattern angular emaildynamic validation for email in angularangular 11 email validationemail validation regex react youtubehow to add email validation in html using angular frameworkvalidasi regex email reactreact regex validation for emailangular email validation regexemail validation react jsangular email validation call a functionangularjs email validationemail form validation in angular 6email validation in angular 4angular input email validationvalidar email angularemail pattern for form validation angularvalidators pattern for email angularangular email validation inputemail validation using angular typescriptreact js test valid email regular expression for email validation angularvalue includes email validation reactjsemail form validation in angularjsvalidators pattern email angularhow to use regex in email validation reactangular email type input validationvalidate email reacthow to email validation with reactangular validationsangular form builder email validation requireduse email validator angular in tsangular template driven form pattern email validationhow to check email and confirm email validator in angularangular validation emailvalidators angular emailregex validate email angularsame email validation angularangular regex email validationvalidate email angular regexangular validation on submit for email patternangular email input validationemail pattern in html input angularhow to validate an email address on input in reactpattern for email angular 9valid email address validation in angularangular validate email with custom patternangular email regexp expressionsangular email regular expressionvalidate email angularngmodel input email patternuse validation email using angular jsemail validation regex in angularjsvalidate email in reactjsreact email validation libraryemail manual validation angularfunction validate email angularemail regex for angular form controlemail validation regex in react onchange eventemail form validation angularangular validate email repeatemail validation in angularjscheck for email address validation in angular 9validate email input in react jsregex for email validation in react nativeangular email validationangular email validation pattern only after user leavesemail format check angularmail validation regex angularangular validators pattern for emailform validation email angular 7angular 7 email validationemail validatition in reactjsreact check email formatangular form validators emailvalidating email address angularangular form email validationhow to check email pattern in reactinvalid email validation showing when adding valid email angularexpressions to validate loercase email address in angularemail validation in react js using email validator exampleemail form validation in angularvalidators pattern mail angularreact email validation exampleangular pattern emailemail validation using angular 8validator angular emailemail validation regex in reacthow to do email validation in react jshow to validate a email in the field in reactform contraole validator emailemail validation form in react using error messageform control emailregexp email validation reactng email validation validate email address in react jsregex angular email validation patternrequired validation in angularvalidate email in string angularangular html email validationangular enforce valid emailemail validation after 40 in angularuniversal email pattern validation in angularangular email verificationreact input email validationvalidate email regex reactjsemail validations react patterbnhow to add email validation in angularreact js email input validationpattern for email validation in angularemail validation for angular 8react check email validationvalidation of email in angularinput type email custom validation reactangular forms email validationsvalidate email regex angularemail validation pattern reacthow to set email validator class in angularangular 11 email regex validatorreact email form validationangular how to validators emailregex for email validation in react jsregular expression for email validation in angular 6email regex pattern reactreact required input emailvalider email react angular form builder validate emailangular material how to validate email using formbuilderhow to add email is required validation in html angular 8 function emailvalidator angularreact form email validationangular validators email patternreact email regex for matchvalidators email in angularangular get email validatoremail validation form angularhow to validate email using validator in react jsjavascript using email validation form using reactangular validators emailangular 12 email validationreact form validation emailinput type email validation in angular angular form control email validationjavascript validate email reactjsangular 4 email validation reactive formangular forms validators emailangular validate email regex formangular pattern validation exampleangular 8 valid email error in redregular expression for email validation in angularemail validator angularemail validation regex angular reactive formnew control 2b email 2b angularemail address validation in angular 6angual email validationverification email in react jspattern email angularangular reactive form email validation tutorialangular email validate fieldemail validation with ngmodelhow to create a email validation in angularemail validation in react natiscrip 2fangulart form validationcheck email validation angularvalidate email text reactvalidators email angularemail validation regex angular 8email validation not working in angularemail and text field validation in react jsformcontrol email validatorangular validate email pipeangular email validangular reactive forms validation for emailemail validation angular ng modelvalidar email type error in angularreactive form email pattern validationemail validation in angular 10react js email field validationemail input angular validationvalidators pattern angular emailangular email custom validatorinput validation check angular for emailwithout 40 we cannot accept mail id in angularexample for validators email angularemail validations with regex angular 9custom email validator angular 6angular template driven form email validationemail validation example in reactangular 8 validate emailemail validation regex in angularreactive forms validation of emailshow to apply email validation in angularemail validation in angular 8 form submitangualr email adress validationform email validation in angularemail validation in angularhow to set email validation in angularcheck email validation in angularjsvalidation email angularemail id validator in angularemail and confirm email validation in angular 8built in validator for email in angularemail format validation in angularemail regex in angular functionemail pattern validation pattern in angularangular form control validation emailreact email validation codeemail validation angular templatepattern email reactjs email validation for ngformvalidation email regex reactreact email regexregex for email validation in angular 8email validation in angular 8 2 validation messageemail validation javascript reactsimple form react email validationangular validate emailvalidation best react emailangular email validation is wrongvalidate 5bemail 5d angularjsvalidation angular email patternangular validators emailangular validate email typescriptemail validation pattern in angularreact js email validationvalidate email template formemail input validation javascript reactvalidation email angular template formcomposant email validation pour react jsemail validation angularjsangular 8 typescript validators email examplecheck email react js regexvalidate email address in angular using regexemailvalidator angularcheck email format angular controlvalidator email angularemail validation reactemail in react jsangular create validator emailhow to validation email and check existing email in react jsemail pattern for input field angularangular 11 email validation pattern exangular 8 email validationemail id validation in angular 8email id validation in reactive form angular 10angular email validatorhow to add validation in email field reactemail pattern in angularcheck email valid in function angukarvalidate email pattern in template form am 3dnagularangular custom email validatoremailvalidation angularvalidate email address with reactjsangulat pattern validaion for emailangular how to add validation to emailemail regex angular 8usign regex to check if email is valid react hooksregex for email validator angular formhow to valid email in reactjsangular reactive form email validationcustom email validation in angular 6validation in angular emailemail validation regex reactangular form email pattern validationvalidation angularemail validation not working in angular material reactive formreact email validation patternhow to validate email in react email validation pattern in angular stackblitzemail validation in angular 8email regular expression in angulartypescript email validators paternangular validator patter for email domainreact email verify examplevalidators pattern emailconfirm email validator in reactive formvalidation email address in angular 10input type email end api validation in angularangular 5 email validation examplevalid email address patter angularcheck for valid email angular9how to validate email in angular 9email input validation angularhow to validate email address in angularvalidate email in reactinput validation in angular jsvalidators email in angularangular email pattern validationregular expression for email angular 8email pattern validation in angular 6 reactive formvalidate email address angularemail validation function in angularreact email validationangular reactive form email validationhow to validation email using regex in react jsemail validation pattern for 40 in angularvalidate email address in angularregex for email validation in reactjsvalidate type email angularcustom email validator for reactemail validation directive angular 9email validation reactjslive email validation with reactregex email validation angularhow to validate and email address in angularangular custom email validationhow to valid email in reactjs in funcangular validate email regexangular has 2bemail 2bvalidationemail validation in angular8reactjs email validationemail validations angular 9validate email on typescript angularemail validators angularregex validation for array of email in angularemail validation in react jsreact check valid emailregular expression email pattern input reactive formemail regex angularangular verify email email pattern validation in angularreact check for real email validationemail validation in reactjsplese enter valid email angularcustom email validation in angularreact js verify emailangular email validator patternemail validation using angularhow to make email validation in form in angularcustom email validator angularhow to validate email address in react jshow to validate email input in reactangular e2 80 99s built in email validatorhow to check email validation in react jshow writed angular validator email patternregex email angularangular input validate emailemail validation in angular without formangular email validation htmlangular email form validationhow to validate input type email in angularhow to valid email in reactjs in functional componentemail validation in html in angular 8how to validate email in react jsemail validation react mediumangular create validator email angularangular pattern validation email pattern in angular 11angular email validation form controlemail verification react jsangular form email validation patternangular email address validationreg exp email angularemail form control requiredvalidation for match email in angularangular email regexangularjs form validation emailangular 4 email validation patternangular email validate programmaticallyngform email validationemail validations in angularvalidator email angularregex email validation reacthow to check email pattern in react regexvalidate email by angular 11email validator reactmail validation pattren in angularreact validate email input input type email react js validationhow to make your email validation in angularverify email address in angular phone number pattern validation angularngform email validatoremail validation angularangular 10 pattern validaion for emailanguar email validatorangular get email validator testemail validation pattern react