Javascript access and validation the form and input elements






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Demo: Using getElementById to get the elements in a form</title>
<script script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<a href="javascript:toggleFormVisibility();" id="sub">Subscribe to our Newsletter!</a>
<form name ="subscribe" id="subscribe_frm" action="#" style="display: none">
<div>
<p>Please enter your subscription information:</p>
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p>
<p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select></p>
<p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p>
</div>
<a href="javascript:toggleFormVisibility();" id="nosub" style="display: none">No, Thank you! Some other time, perhaps....</a>
</form>






Example demo1.js


function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}

function checkEmail(email)
{

var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

if(pattern.test(email)) {
return true;
} else {
return false;
}

}

function toggleFormVisibility()
{
var frm_element = document.getElementById('subscribe_frm');
var sub_link_element = document.getElementById('sub');
var nosub_link_element = document.getElementById('nosub');

var vis = frm_element.style;

if(vis.display=='' || vis.display=='none') {
vis.display = 'block';
sub_link_element.style.display='none';
nosub_link_element.style.display='';
} else {
vis.display = 'none';
sub_link_element.style.display='block';
nosub_link_element.style.display='none';
}

}

function processFormData()
{

var name_element = document.getElementById('txt_name');
var email_element = document.getElementById('txt_email');
var mail_format_element = document.getElementById('slt_mail_format');

var name = trim(name_element.value);
var email = trim(email_element.value);
var mail_format = mail_format_element.value;

var error_message = 'The following fields had errors in them: \n\n';
var data = 'You entered the following information: \n\n';

var error_flag = false;

if(name == '') {
error_message += 'Name: Please enter your name\n';
error_flag = true;
} else {
data += 'Name: ' + name + '\n';
}

if(!checkEmail(email)) {
error_message += 'Email: Please enter a valid email address';
error_flag = true;
} else {
data += 'Email: ' + email + '\n';
}

data += 'Mail Format: ' + mail_format;

if(error_flag) {
alert(error_message);
} else {
alert(data);
}

}





In this demo, we toggle the visibility of the form. This is done by accessing the form element <form> which we have seen above and setting its display property as shown in the code below:




function toggleFormVisibility()
{
var frm_element = document.getElementById('subscribe_frm');
var sub_link_element = document.getElementById('sub');
var nosub_link_element = document.getElementById('nosub');

var vis = frm_element.style;

if(vis.display=='' || vis.display=='none') {
vis.display = 'block';
sub_link_element.style.display='none';
nosub_link_element.style.display='';
} else {
vis.display = 'none';
sub_link_element.style.display='block';
nosub_link_element.style.display='none';
}

}






Input validation

The code below makes sure that the field is not empty.
First, we trim out any leading and trailing blank space.
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}





The code below validates the txt_name field in our processFormData function.

var name_element = document.getElementById (‘txt_name’);</pre>
<div>
<div><code>if</code> <code>(trim(name_element.value) == </code><code>''</code><code>)</code></div>
<div><code>{</code></div>
<div><code>   </code><code>alert (</code><code>'Please enter your name'</code><code>);</code></div>
<div><code>}</code></div>
</div>
<pre>
Javascript access and validation the form and input elements

Example demo1.js

Input validation

0 comments:

Post a Comment

Javascript access and validation the form and input elements

Example demo1.js

Input validation

Next

Newer Post

Previous

Older Post

0 comments:

Post a Comment
