Wednesday, January 12, 2011

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



Basically the script does the following,

The function above checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign. The by using "len-dotpos" we make sure that there are characters after those dot

So now we have created Client Side Scripts for Validating Web Form Controls using DHTML.

7 comments:

Hick said...

Hi this is karthik from st.joseph's really a good work by u guys.........VEC rockksssssssssssssssssssssssssssssssssssssssssssss...................

Hick said...

Hi this is karthik from st.joseph's really a good work by u guys.........VEC rockksssssssssssssssssssssssssssssssssssssssssssss...................

G.Vivek Venkatesh said...

Thank you Karthik..Keep visiting the blog..:)

Mr.Lonely said...

hiya...friends..this is suhale...from crescent engg..u guys..rocking the site n college...all the best...ur posts r so much useful for me...
if u need any help..inshallah ask me
contact me:9677383398
lonely.suhale@gmail.com
suhaleakther@yahoo.com

Mr.Lonely said...

thelecturernotes.blogspot.com is the site for question bank n notes for our semester...pls use it...nice site...
yaar...
hehe..u did so many help for me...this s my small help fr my friend venki...:)

-Mr.lonely

Mr.Lonely said...

hi...venki...i need e-ticketing mini project for ooad...pls if u hav send it to...
suhaleakther@yahoo.com

Unknown said...

Hi,One of the really great things about working on the webform in Web Design Cochin, is the amount of information you can get about your customers.Thanks.........