0151 355 4555

Validate email addresses and telephone numbers in Javascript

01/07/2010 by Mark Carrington

Add advanced email, telephone and mobile validation to your website with no coding.

Our email validation, telephone validation and mobile validation web services are now available for you to add to your website in minutes using our new Javascript validation framework. Follow our quick step-by-step guide to improve the quality of data collected on your website immediately.

1. Account Setup
If you haven't already, register for a data8 account now and purchase credits for the services you require, including one or more of the email, telephone or mobile validation services.

2. Request Ajax Key
Get your Ajax key by entering your data8 username and password, and the domain name your website is hosted on.

3. Add Javascript
Add the following lines of Javascript to your page - replace AJAX-KEY with the key you received in step 2:

<script type="text/javascript" src="http://webservices.data-8.co.uk/javascript/loader.ashx?key=AJAX-KEY"></script>
<script type="text/javascript" src="http://webservices.data-8.co.uk/javascript/validation_min.js"></script>
<script type="text/javascript">
// initializePopupData8Validation();
initializeInlineData8Validation();
</script>

4. Identify fields to validate
Add a "d8validation" attribute to each text input field you want to be validated and set it to one of the following values:

  • "telephone" - uses our telephone validation service to validate the field value, ensuring it falls into a valid range of UK telephone numbers
  • "mobile" - uses our mobile validation service to validate the field value, ensuring it is a live mobile number
  • "telephone+mobile" - if the field value appears to be a mobile number, validates it using our mobile validation service, otherwise, validates it using our telephone validation service
  • "email" - uses our email validation service to validate the field value, ensuring it is syntactically correct and is associated with a live mail server

Add a "d8errortext" attribute to the same text input fields to define the error message to display if the field is found to be invalid.

For example, if your field originally looked like:

<input type="text" id="telno1" />

you could update it to be:

<input type="text" id="telno1" d8validation="telephone+mobile" d8errortext="Please enter a valid telephone number" />

5. Customize
You will now have a functional page with entered values being validated before they can be submitted, and any errors will be indicated by messages displayed next to any fields in error. You can customize the behaviour and display of any errors in several ways:

  • Format the error messages. Any error messages are displayed using the CSS class "data8error" - simply define this class in your stylesheet to change how any errors are displayed.
  • Use popup warnings. Instead of displaying errors next to the fields they relate to, you may prefer to display a popup message when the user tries to submit their details. To do this, uncomment the line "initializePopupData8Validation();" from step 3 and comment out the line "initializeInlineData8Validation();".
  • Go completely custom. If you want full control over how any errors are displayed, you can provide your own functions that will be called when errors are detected. The function "initializeInlineData8Validation" can take two parameters, the first of which is a function that will be called when an error is detected and the second when an error is corrected. Each of these functions will be called with a single parameter set to the <input> element that has been modified. In the same way, "initializePopupData8Validation" can take one parameter that is a function that will be called when the user attempts to submit the form with invalid data. This function will be called with a single parameter set to the <input> element that is in error.

Formatting example
The following example shows displaying the error messages using an icon instead of text. Simply place a 16x16 image named error.gif in the same directory.

<style type="text/css">
.data8error {
  display: block;
  height: 16px;
  width: 16px;
  padding: 16px 16px;
  background-image: url('error.gif');
}
</style>

Customization example
The following example shows error messages in a separate area at the bottom of the form. Errors are formatted as links, and clicking on the link takes the user to the field that is causing the error.

<script type="text/javascript">
function showCustomError(element) {
  // In case another error is already being shown for this element, hide it.
  hideCustomError(element);

  // Create a link and set it's text to the error message defined for this element.
  var label = document.createElement('a');
  label.innerText = element.d8errortext;

  // Handle clicking on the link by selecting the element in error.
  label.onclick = function() {
    if (element.focus)
      element.focus();

    if (element.select)
      element.select();
  }

  // Add the link to the area at the bottom of the form.
  document.getElementById('error_div').appendChild(label);

  // Store a reference to the label from the form element so we can find it again later when we need to hide it.
  element.errorLabel = label;
}

function hideCustomError(element) {
  // Check that we have an error message being displayed for this element.
  if (element.errorLabel) {
    // We have an error message, so remove it.
    element.errorLabel.parentNode.removeChild(element.errorLabel);
    element.errorLabel = null;
  }
}
</script>
<form>
Telephone Number:<br />
<input type="text" d8validation="telephone" d8errortext="Please enter a valid telephone number" />
<br />
Mobile Number:<br />
<input type="text" dvlidation="mobile" d8errortext="Please enter a valid mobile number" />
<div id="error_div">
</div>
</form>

< Back to Blog

topsy.com on Validate email addresses and telephone numbers in Javascript

Pingback from topsy.com Twitter Trackbacks for Validate email addresses and telephone numbers in Javascript [data-8.co.uk] on Topsy.com

1/6/2014 12:11:25 PM, topsy.com

javascript.darmowe-blogi.pisz.pl on Validate email addresses and telephone numbers in Javascript

Pingback from javascript.darmowe-blogi.pisz.pl Validate email addresses and telephone numbers in Javascript &amp;#8211; javascript - dowiedz si&#196;™ wi&#196;™cej!

1/6/2014 12:11:25 PM, javascript.darmowe-blogi.pisz.pl

8811.org on Validate email addresses and telephone numbers in Javascript

Pingback from 8811.org Validate email addresses and telephone numbers in Javascript &amp;laquo; &#230;Š€&#232;&#161;“&#232;€…&#230;&#180;&#190;&#233;&#163;&#227;&#174;&#230;Š€&#232;&#161;“&#230;—&#165;&#232;&#170;Œ&#227;ƒ–&#227;ƒ&#173;&#227;‚&#176;

1/6/2014 12:11:25 PM, 8811.org
Add comment