Tuesday, 3 January 2012

Validating Web Form Controls using DHTML


Validating Web Form Controls using DHTML

Question - Client Side Scripts for Validating Web Form Controls using DHTML.

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

I am going to create a simple HTML form where we validate the email Id..

First create the form, then using JavaScript we will validate the Email Id field, that is we will check if the user has entered a valid email id. Like if they leave @ or . we need to display to the user the error and make user they enter the proper format.

Here goes the code for the form,


<head>

<script type="text/javascript">

function validate_email(field)

{

with (field)

  {

  apos=value.indexOf("@");

  dotpos=value.lastIndexOf(".");

  len=value.length;

  if (apos<1||dotpos-apos<2||(len-dotpos)<2)

    {   document.getElementById('email_text').style.display = 'block';

    return false;}

  else

  {

  return true;}

  }

}

function validate_form(thisform)

{

with(thisform)

{

  if (validate_email(email)==false)

    {email.focus();return false;}

   alert("Registration Successful..Thank you!");   

}

}

</script>

</head>

Now we write the Javascript code to validate the email Id field,



<head>

<script type="text/javascript">

function validate_email(field)

{

with (field)

  {

  apos=value.indexOf("@");

  dotpos=value.lastIndexOf(".");

  len=value.length;

  if (apos<1||dotpos-apos<2||(len-dotpos)<2)

    {   document.getElementById('email_text').style.display = 'block';

    return false;}

  else

  {

  return true;}

  }

}

function validate_form(thisform)

{

with(thisform)

{

  if (validate_email(email)==false)

    {email.focus();return false;}

   alert("Registration Successful..Thank you!");   

}

}

</script>

</head>




Download the Source Code

0 comments: