A jQuery Script to Check if a String is a Phone Number or Email Address

Here’s a simple jQuery code snippet to check if a string is either a phone number or email address. It could be very useful for checking form validation. You can then have a input called “Email or Phone” then on submit check the value and if its a phone number then set value to the phone input and clear email input before form submit.

jQuery Code


//validate name
var name = $('input[name="name"]').val();
if (name.length < 3)
{
    alert('Please enter a name 3 characters or more.');
    return false;
}
//validate email
var email = $('input[name="email"]').val(),
    emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(email) || email == '')
{
     alert('Please enter a valid email address.');
     return false;
}
//validate phone
var phone = $('input[name="phone"]').val(),
    intRegex = /[0-9 -()+]+$/;
if((phone.length < 6) || (!intRegex.test(phone)))
{
     alert('Please enter a valid phone number.');
     return false;
}

Phone or email


//check if they entered a phone number OR email address
var ep_emailval = $('#email').val();
var intRegex = /[0-9 -()+]+$/;
if(intRegex.test(ep_emailval)) {
   console.log("is phone");
   //copy value to phone field
   $('#phone').attr('value',ep_emailval);
   //clear email field
   $('#email').attr('value','');
}

HTML Code


//check if they entered a phone number OR email address

Frequently Asked Questions (FAQs) about jQuery Phone Number and Email Validation

How can I use jQuery to validate international phone numbers?

jQuery doesn’t natively support international phone number validation. However, you can use the International Telephone Input library, which is a jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, automatically formats the number, and includes placeholder text. You can initialize the plugin on your input field and use its built-in validation method to validate the phone number.

How can I customize the error messages in jQuery validation?

jQuery validation plugin allows you to customize error messages. You can do this by passing an object to the messages option when you call the validate method. The object should have properties that match the names of your input fields, and the values should be the custom error messages you want to display.

Can I use regular expressions for phone number validation in jQuery?

Yes, you can use regular expressions (regex) for phone number validation in jQuery. Regex can be very useful for complex validation patterns that can’t be achieved with the standard methods provided by the jQuery validation plugin.

How can I validate an email address using jQuery?

jQuery validation plugin provides a built-in method called email that you can use to validate email addresses. You just need to add the email rule to your input field when you call the validate method.

Can I validate multiple fields at once using jQuery?

Yes, jQuery validation plugin allows you to validate multiple fields at once. You can do this by passing an object to the rules option when you call the validate method. The object should have properties that match the names of your input fields, and the values should be the validation rules you want to apply.

How can I use jQuery to validate a phone number without using a plugin?

You can validate a phone number in jQuery without using a plugin by using a regular expression. You can create a regex pattern that matches the format of the phone number you want to validate, and then use the test method to check if the input matches the pattern.

How can I handle validation for different types of phone number formats?

Handling different phone number formats can be tricky. One approach is to use a regular expression that matches the formats you want to accept. Another approach is to use a library like Google’s libphonenumber, which can validate and parse phone numbers for all countries/regions of the world.

How can I show a custom validation message for a specific field?

You can show a custom validation message for a specific field by using the messages option in the jQuery validation plugin. You just need to pass an object to the messages option that has properties matching the names of your input fields, and the values should be the custom messages you want to display.

Can I use jQuery to validate a phone number on the server-side?

jQuery is a client-side JavaScript library, so it can’t be used for server-side validation. However, you can use jQuery to validate the phone number on the client-side before sending it to the server. This can help reduce server load and improve user experience by catching invalid input before it’s sent to the server.

How can I validate a phone number and email at the same time using jQuery?

You can validate a phone number and email at the same time using the jQuery validation plugin. You just need to add the appropriate validation rules to both the phone number and email input fields when you call the validate method.