How to validate Email or Phone Number Using Single Input?
I like to have input value xyz@gmail.com OR 1234567890 anything else alert "Invalid Email or phone number"
Like Facebook Sign Up form
<form>
<input type="text" placeholder="Email or mobile number" />
<button type="submit" >Sign Up</button>
</form>
Thanks!!
I Did using two regular expressions like
function validateEmail() {
var email = document.getElementById('txtEmail');
var mailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/;
if (email.value == "") {
alert( " Please enter your Email or Phone Number ");
}
else if (!mailFormat.test(email.value)) {
alert( " Email Address / Phone number is not valid, Please provide a valid Email or phone number ");
return false;
}
else {
alert(" Success ");
}
}
I'd probably test it with two regexes. First check for one (e.g. is it a valid email), then if that fails, check it with the other (e.g. is it a valid phone number). If neither, show a validation message saying that the value is invalid. I won't supply regex examples here as there are dozens of those around the internet and each has pros and cons - no sense starting a flame war over the best regex for email or phone, but the code would look like the following:
function validateEmailPhoneInput(field)
{
if (emailRegex.test(field.value))
{
//it's an email address
}
else if (phoneRegex.test(field.value))
{
//it's a phone number
}
else
{
//display your message or highlight your field or whatever.
field.classList.add('invalid');
}
}
Try this it's working:
<script>
$(document).ready(function () {
$("#cuntryCode").hide();
$("#useridInput").on('input', function () {
var len = $("#useridInput").val().length;
if (len >= 2) {
var VAL = this.value;
var intRegex = /^[1-9][0-9]*([.][0-9]{2}|)$/;
if (!intRegex.test(VAL)) {
$('#error-caption').html('Invalid email. Please check spelling.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").hide();
} else {
if(len < 10){
$('#error-caption').html('Invalid mobile number. Please try again.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").show();
}else{
$('#error-caption').html('Invalid mobile number. length must be 10 digit.');
$('#error-caption').css('color', 'red');
}
}
}else{
$("#cuntryCode").hide();
$('#error-caption').html('');
}
});
});
</script>
<form class="push--top-small forward" method="POST" data-reactid="15">
<h4 id="input-title" data-reactid="16">Welcome back
</h4>
<label class="label" id="input-label" for="useridInput" data-reactid="17">Sign in with your email address or mobile number.
</label>
<div style="margin-bottom:24px;" data-reactid="18">
<div >
<div id="cuntryCode" class="_style_4kEO6r" style="float: left; height: 44px; line-height: 44px;">
<div tabindex="0" > +241
</div>
</div>
<div style="display:flex;">
<input id="useridInput" autocorrect="off" autocapitalize="off" name="textInputValue" class="text-input" placeholder="Email or mobile number" aria-required="true" aria-invalid="false" aria-describedby="error-caption input-title">
</div>
</div>
<div id="error-caption">
</div>
</div>
<button class="btn btn--arrow btn--full" data-reactid="24">
<span class="push-small--right" data-reactid="25">Next
</span>
</button>
</form>
$("#volunteer_submit").click(function myfunction() {
function email_number_check() {
var email_number = $("input[name=email_mobile]").val();
if (email_number == "") {
alert("Fill in the Required Fields field cannot be empty");
}
else if (isNaN(email_number) == true) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(email_number) == false) {
alert('Invalid Email Address');
}
else {
$("#contact-form").submit();
}
}
else if (isNaN(email_number) == false) {
var reg_mobile = /^(\+\d{1,3}[- ]?)?\d{10}$/;
if (reg_mobile.test(email_number) == false) {
alert('Invalid mobile');
}
else {
$("#contact-form").submit();
}
}
}
email_number_check();
});
This code is worked for me.
var a=document.getElementById('txtEmail').value;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(a=="")
{
alert('Please enter value');
return false;
}
else if(isNaN(a))
{
if(!(a.match(mailformat)))
{
alert('Please enter email address/phno valid');
return false;
}
}
else
{
if(a.length()!=10)
{
alert('Please enter valid phno');
return false;
}
}
