...

View Full Version : small problem with this code. can anyone help?



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>

abduraooft
03-11-2009, 10:29 AM
How do i put the warning image on the other side of the input field box when i click submit?? Can't you just use an <img> tag (http://htmldog.com/reference/htmltags/img/) ?

kevinfoleycork
03-11-2009, 10:48 AM
I don't know how to position it in javascript

I changed the part where java script inserts the img to this code

o.parentNode.insertBefore(errorIndicator,o.nextSibling);

and it puts the img after the field box just like I want but when you click submit it keeps adding imgs and I dont want that...

Philip M
03-11-2009, 11:38 AM
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?




var telphone = document.getElementById("phone").value;
if (/[^0-9\s\-]/.test(telphone)) {
alert ("Only numbers, spaces and hyphens are allowed in the phone number field");
return false;
}


In future please use the [code] tags when posting you code.



Quizmaster: How many days will there be in the year 2010?
Contestant: Er... is it 60 or 52?

kevinfoleycork
03-11-2009, 11:54 AM
Thanks

Any idea on how to change the image from the left hand side of the input box to the right hand side??

Or would you know of any place i can download a standard form with name,surname, mobile number, comments, and email.. all of which are required fields...

Id be will to pay for it if i got a good one?

abduraooft
03-11-2009, 12:01 PM
I changed the part where java script inserts the img to this code

o.parentNode.insertBefore(errorIndicator,o.nextSibling);

and it puts the img after the field box just like I want but when you click submit it keeps adding imgs and I dont want that...
You could set a CSS property like display/visibility to hide that image in the begnning and then revert it, using javascript whenver required.
See http://www.w3schools.com/HTMLDOM/prop_style_visibility.asp

Henley
03-11-2009, 01:47 PM
EDIT: validation error.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var alertImgs = [];
var nImage = "";

function validate(nForm){

for (i=0; i<alertImgs.length; i++)
{
nImage[alertImgs[i]].style.visibility = "hidden";
}
var nFirstName = nForm['firstName'];
var nSurName = nForm['surName'];
var nMobile = nForm['mobile'];
var nEmail = nForm['email'];
if (nFirstName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your first name');
document.images[alertImgs[0]].style.visibility = "visible";
return false;
}
if (nSurName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your last name');
document.images[alertImgs[1]].style.visibility = "visible";
return false;
}
if (!/[\d\s-]+$/.test(nMobile.value) || !/\d{10}/.test(nMobile.value.replace(/[\s-]/g, ""))) // must contain 10 digits;
{
alert('Enter your mobile phone number');
document.images[alertImgs[2]].style.visibility = "visible";
return false;
}
if (!/^\w+[\w|\.|\-]{0,1}\w*[\w|\.|\-]{0,1}\w*\@\w+[\w|\-]{0,1}\w*[\w|\-]{0,1}\w*\.{1,1}[a-z]{2,4}$/.test(nEmail.value))
{
alert('Invalid Email');
document.images[alertImgs[3]].style.visibility = "visible";
return false;
}
if (nForm['comments'].value == "")
{
alert('Please write a comment');
document.images[alertImgs[4]].style.visibility = "visible";
return false;
}
alert('Thank you for your submission');
return true;
}

function init(){

nImage = document.images;
var imgFileName = "";
for (i=0; i<nImage.length; i++)
{
imgFileName = nImage[i].src;
imgFileName = imgFileName.substring(imgFileName.lastIndexOf("/")+1,imgFileName.length)
if (imgFileName == "alert.gif")
{
alertImgs[alertImgs.length] = i;
nImage[i].style.visibility = "hidden";
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);


</script>
<style type="text/css">

body {background-color: #fffacd; margin-top: 60px;}
form {width: 350px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
fieldset {width: 350px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
label {font-family: tahoma; font-size: 11pt; color: #00008b; padding: 5px; display: block;}
.comment {font-family: arial; font-size: 10pt; margin-left: 48px; overflow: hidden;}
.alertImg {margin-left: 3px;}
.submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto;
margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form action="" method="post" onsubmit="return validate(this)">
<fieldset>
<legend>Form</legend>

<label>Name: <input type="text" name="firstName" size="36" class="">
<img src="alert.gif" class="alertImg"></label>
<label>Surname: <input type="text" name="surName" size="33" class="">
<img src="alert.gif" class="alertImg"></label>
<label>Mobile: <input type="text" name="mobile" size="36" class="">
<img src="alert.gif" class="alertImg"></label>
<label>Email: <input type="text" name="email" size="37" class="">
<img src="alert.gif" class="alertImg"></label>
<label>Comments:<img src="alert.gif" class="alertImg"></label>
<textarea rows="5" cols="42" name="comments" class="comment"></textarea>

<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>

kevinfoleycork
03-11-2009, 02:59 PM
Thats exactly what i wanted.

Thanks a mill ;)

kevinfoleycork
03-11-2009, 04:40 PM
Can anybody get this to validate as strict and how would i put the java script into a separate file and add an event listener into the html file??



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>

<link href="stylesheet.css" rel="stylesheet" type="text/css"/>




<script type="text/javascript">

var alertImgs = [];
var nImage = "";

function validate(nForm){

for (i=0; i<alertImgs.length; i++)
{
nImage[alertImgs[i]].style.visibility = "hidden";
}
var nFirstName = nForm['firstName'];
var nSurName = nForm['surName'];
var nMobile = nForm['mobile'];
var nEmail = nForm['email'];
if (nFirstName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your first name');
document.images[alertImgs[0]].style.visibility = "visible";
return false;
}
if (nSurName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your last name');
document.images[alertImgs[1]].style.visibility = "visible";
return false;
}
if (!/[\d\s-]+$/.test(nMobile.value) || !/\d{10}/.test(nMobile.value.replace(/[\s-]/g, ""))) // must contain 10 digits;
{
alert('Enter your mobile phone number');
document.images[alertImgs[2]].style.visibility = "visible";
return false;
}
if (!/^\w+[\w|\.|\-]{0,1}\w*[\w|\.|\-]{0,1}\w*\@\w+[\w|\-]{0,1}\w*[\w|\-]{0,1}\w*\.{1,1}[a-z]{2,4}$/.test(nEmail.value))
{
alert('Invalid Email');
document.images[alertImgs[3]].style.visibility = "visible";
return false;
}
if (nForm['comments'].value == "")
{
alert('Please write a comment');
document.images[alertImgs[4]].style.visibility = "visible";
return false;
}
alert('Thank you for your submission');
return true;
}

function init(){

nImage = document.images;
var imgFileName = "";
for (i=0; i<nImage.length; i++)
{
imgFileName = nImage[i].src;
imgFileName = imgFileName.substring(imgFileName.lastIndexOf("/")+1,imgFileName.length)
if (imgFileName == "alert.gif")
{
alertImgs[alertImgs.length] = i;
nImage[i].style.visibility = "hidden";
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);


</script>




</head>
<body>


<div id="wrapper">




<div id="main_content_content">





<form action="" method="post" onsubmit="return validate(this)">









<p><label>Name:</label> <input type="text" name="firstName" />
<img src="alert.gif" alt="" class="alertImg" /></p>



<p><label>Surname:</label> <input type="text" name="surName" />
<img src="alert.gif" alt="" class="alertImg" /></p>


<p><label>Mobile:</label> <input type="text" name="mobile" />
<img src="alert.gif" alt="" class="alertImg" /></p>




<p><label>Email:</label> <input type="text" name="email" />
<img src="alert.gif" alt="" class="alertImg" /></p>

<p><label>Comments:</label><textarea name="msg" id="msg" cols="30" rows="3"></textarea><img src="alert.gif" alt=""class="alertImg" /></p>





<p> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /></p>





</form>

</div>
<!-- InstanceEndEditable -->
<div id="main_content_footer"></div>
</div>
</div>


</div>

</div>

</body><!-- InstanceEnd --></html>

abduraooft
03-11-2009, 04:51 PM
Move everything in between your

<script type="text/javascript">

</script> into a file with a .js extension and then add an src attribute to your script tag like

<script type="text/javascript" src="path-your-new-file-/name-of-file.js"></script>

kevinfoleycork
03-11-2009, 09:24 PM
Move everything in between your

<script type="text/javascript">

</script> into a file with a .js extension and then add an src attribute to your script tag like

<script type="text/javascript" src="path-your-new-file-/name-of-file.js"></script>

yes i have done that for the above file but the java script wont work.

do i need to add an event listener or something??

Thanks for your help

abduraooft
03-12-2009, 08:16 AM
Could you post your current html and javascript separately?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum