kevinfoleycork
03-11-2009, 09:55 AM
How do i put the warning image on the other side of the input field box when i click submit??
And does anyone know how I can put a piece of java script to make sure people put in numbers into the phone number field?
The alert img is attached.
Thanks
______________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Complex Form Example</title>
<style type="text/css">
#errormsg
{
border:2px solid #c00;
padding:5px;
width:20em;
}
.error
{
background:#fcc;
}
</style>
<script type="text/javascript">
function checkform(of)
{
// Test if DOM is available and there is an element called required
if(!document.getElementById || !document.createTextNode){return;}
if(!document.getElementById('required')){return;}
// Define error messages and split the required fields
var errorID='errormsg';
var errorClass='error';
/* changes for name list */
var errorMsg='Please Enter or change the following fields:';
/* end changes for named list */
var errorImg='img/alert.gif';
var errorAlt='Error';
var errorTitle='This field has an error!';
var reqfields=document.getElementById('required').value.split(',');
// Cleanup old mess
//if there is an old error message field, delete it
if(document.getElementById(errorID))
{
var em=document.getElementById(errorID);
em.parentNode.removeChild(em);
}
// remove old images and classes from the required fields
for(var i=0; i < reqfields.length; i++)
{
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
{
f.parentNode.removeChild(f.previousSibling);
}
f.className='';
}
// loop over required fields
for(var i=0;i < reqfields.length; i++)
{
// check if required filed is there
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
// test if the required field has an error,
// according to its type
switch(f.type.toLowerCase())
{
case 'text':
if(f.value=='' && f.id!='email'){cf_adderr(f)}
// email is a special field and needs checking
if (f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}
break;
case 'textarea':
if(f.value==''){cf_adderr(f)}
break;
case 'checkbox':
if(!f.checked){cf_adderr(f)}
break;
case 'select-one':
if(!f.selectedIndex && f.selectedIndex==0){cf_adderr(f)}
break;
}
}
return !document.getElementById(errorID);
/* Tool methods */
function cf_adderr(o)
{
// create image, add to and colourise the error fields
var errorIndicator=document.createElement('img');
errorIndicator.alt=errorAlt;
errorIndicator.src=errorImg;
errorIndicator.title=errorTitle;
o.className=errorClass;
o.parentNode.insertBefore(errorIndicator,o);
// check if there is no error message
if(!document.getElementById(errorID))
{
//create error message and insert before submit button
var em=document.createElement('div');
em.id=errorID;
var newp=document.createElement('p');
newp.appendChild(document.createTextNode(errorMsg));
// clone and insert the error image
newp.appendChild(errorIndicator.cloneNode(true));
em.appendChild(newp);
/* added for named list */
var newul=document.createElement('ul');
em.appendChild(newul);
/* end added for named list */
// find the submit button
for(var i=0; i < of.getElementsByTagName('input').length; i++)
{
if(/submit/i.test(of.getElementsByTagName('input')[i].type))
{
var sb=of.getElementsByTagName('input')[i];
break;
}
}
if(sb)
{
sb.parentNode.insertBefore(em,sb);
}
}
/* added for named list */
var em=document.getElementById(errorID).getElementsByTagName('ul')[0];
var newli=document.createElement('li');
for(var i=0; i < of.getElementsByTagName('label').length; i++)
{
if(of.getElementsByTagName('label')[i].htmlFor==o.id)
{
var txt=of.getElementsByTagName('label')[i].firstChild.nodeValue;
break;
}
}
newli.appendChild(document.createTextNode(txt));
em.appendChild(newli);
/* end added for named list */
}
function cf_isEmailAddr(str)
{
return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return checkform(this);">
<p>
<input type="hidden" name="required" id="required" value="name,surname,email,tac,msg,contactform" />
<label for="name">Name</label>
<input type="text" name="name" id="name" /><span>*</span>
</p>
<p>
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" /><span>*</span>
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" /><span>*</span>
</p>
<p>
<label for="phone">Phone number</label>
<input type="text" name="phone" id="phone" /><span>*</span>
</p>
<p>
<label for="contactform">Prefered form of contact</label>
<select id="contactform" name="contctform">
<option value="">Please choose</option>
<option value="p">phone</option>
<option value="e">email</option>
</select><span>*</span>
</p>
<p>
<label for="msg">Your message</label>
<textarea name="msg" id="msg" cols="30" rows="3"></textarea><span>*</span>
</p>
<p>
<input type="checkbox" name="tac" id="tac" />
I have read the <label for="tac">terms and conditions and agree with them.</label><span>*</span>
</p>
<p>
<input type="submit" value="Send information" />
</p>
</form>
</body>
</html>
And does anyone know how I can put a piece of java script to make sure people put in numbers into the phone number field?
The alert img is attached.
Thanks
______________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Complex Form Example</title>
<style type="text/css">
#errormsg
{
border:2px solid #c00;
padding:5px;
width:20em;
}
.error
{
background:#fcc;
}
</style>
<script type="text/javascript">
function checkform(of)
{
// Test if DOM is available and there is an element called required
if(!document.getElementById || !document.createTextNode){return;}
if(!document.getElementById('required')){return;}
// Define error messages and split the required fields
var errorID='errormsg';
var errorClass='error';
/* changes for name list */
var errorMsg='Please Enter or change the following fields:';
/* end changes for named list */
var errorImg='img/alert.gif';
var errorAlt='Error';
var errorTitle='This field has an error!';
var reqfields=document.getElementById('required').value.split(',');
// Cleanup old mess
//if there is an old error message field, delete it
if(document.getElementById(errorID))
{
var em=document.getElementById(errorID);
em.parentNode.removeChild(em);
}
// remove old images and classes from the required fields
for(var i=0; i < reqfields.length; i++)
{
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
{
f.parentNode.removeChild(f.previousSibling);
}
f.className='';
}
// loop over required fields
for(var i=0;i < reqfields.length; i++)
{
// check if required filed is there
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
// test if the required field has an error,
// according to its type
switch(f.type.toLowerCase())
{
case 'text':
if(f.value=='' && f.id!='email'){cf_adderr(f)}
// email is a special field and needs checking
if (f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}
break;
case 'textarea':
if(f.value==''){cf_adderr(f)}
break;
case 'checkbox':
if(!f.checked){cf_adderr(f)}
break;
case 'select-one':
if(!f.selectedIndex && f.selectedIndex==0){cf_adderr(f)}
break;
}
}
return !document.getElementById(errorID);
/* Tool methods */
function cf_adderr(o)
{
// create image, add to and colourise the error fields
var errorIndicator=document.createElement('img');
errorIndicator.alt=errorAlt;
errorIndicator.src=errorImg;
errorIndicator.title=errorTitle;
o.className=errorClass;
o.parentNode.insertBefore(errorIndicator,o);
// check if there is no error message
if(!document.getElementById(errorID))
{
//create error message and insert before submit button
var em=document.createElement('div');
em.id=errorID;
var newp=document.createElement('p');
newp.appendChild(document.createTextNode(errorMsg));
// clone and insert the error image
newp.appendChild(errorIndicator.cloneNode(true));
em.appendChild(newp);
/* added for named list */
var newul=document.createElement('ul');
em.appendChild(newul);
/* end added for named list */
// find the submit button
for(var i=0; i < of.getElementsByTagName('input').length; i++)
{
if(/submit/i.test(of.getElementsByTagName('input')[i].type))
{
var sb=of.getElementsByTagName('input')[i];
break;
}
}
if(sb)
{
sb.parentNode.insertBefore(em,sb);
}
}
/* added for named list */
var em=document.getElementById(errorID).getElementsByTagName('ul')[0];
var newli=document.createElement('li');
for(var i=0; i < of.getElementsByTagName('label').length; i++)
{
if(of.getElementsByTagName('label')[i].htmlFor==o.id)
{
var txt=of.getElementsByTagName('label')[i].firstChild.nodeValue;
break;
}
}
newli.appendChild(document.createTextNode(txt));
em.appendChild(newli);
/* end added for named list */
}
function cf_isEmailAddr(str)
{
return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return checkform(this);">
<p>
<input type="hidden" name="required" id="required" value="name,surname,email,tac,msg,contactform" />
<label for="name">Name</label>
<input type="text" name="name" id="name" /><span>*</span>
</p>
<p>
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" /><span>*</span>
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" /><span>*</span>
</p>
<p>
<label for="phone">Phone number</label>
<input type="text" name="phone" id="phone" /><span>*</span>
</p>
<p>
<label for="contactform">Prefered form of contact</label>
<select id="contactform" name="contctform">
<option value="">Please choose</option>
<option value="p">phone</option>
<option value="e">email</option>
</select><span>*</span>
</p>
<p>
<label for="msg">Your message</label>
<textarea name="msg" id="msg" cols="30" rows="3"></textarea><span>*</span>
</p>
<p>
<input type="checkbox" name="tac" id="tac" />
I have read the <label for="tac">terms and conditions and agree with them.</label><span>*</span>
</p>
<p>
<input type="submit" value="Send information" />
</p>
</form>
</body>
</html>