Email and Phone Validation in a single field

Toggle class name on click in jQuery

by sanat gupta

HTML

<div id="banner-message">
   <div>
   <input type="text" placeholder="Email/phone" id="email_phone">
    <button onClick="validate()">Submit</button>
    
   </div>
   <span id="error"></span>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
#error{
  font-size:14px;
  color:red;
}

JavaScript

function validate(){
	var value = $("#email_phone").val();
  
  var regex = new RegExp('^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|(^[0-9]{10})+$');
  
  if(value){
  		 if(!regex.test(value)){
          $("#error").text("Please enter valid email address or phone number.")
       }else{
         $("#error").text('')
       }
  }else{
   	$("#error").text('This field is required.')
  }
 	

}