...

View Full Version : Display Message Within Div



ben1390
07-03-2012, 04:47 PM
Hi All,

I have this code which validates my form, however currently the alert messages are displayed in an alert box and I would like them displayed in a div beside each input box that I can style accordingly, how would I achieve this?

Any help will be greatly appreciated


function validateForm()
{
var postcode=document.forms["duos"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter your postcode");
return false;
}
var building=document.forms["duos"]["building"].value;
if (building==null || building=="Please Select")
{
alert("Please select your building type");
return false;
}
var consumption=document.forms["duos"]["consumption"].value;
if (consumption==null || consumption=="")
{
alert("Please enter your annual consumption");
return false;
}
}

vwphillips
07-03-2012, 05:31 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.warning {
display:none;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function validateForm(){
var pass=true,postcode=document.forms["duos"]["postcode"].value;
Clear('postcodeID');
if (postcode=='') {
document.getElementById("postcodeID").style.display='inline';
pass= false;
}
var building=document.forms["duos"]["building"].value;
Clear('buildingID');
if (building=='' || building=="Please Select"){
document.getElementById("buildingID").style.display='inline';
pass= false;
}
var consumption=document.forms["duos"]["consumption"].value;
Clear('consumptionID');
if (consumption==''){
document.getElementById("consumptionID").style.display='inline';
pass= false;
}
return pass;
}

function Clear(id){
document.getElementById(id).style.display='none';

}
/*]]>*/
</script>

</head>

<body>
<form name="duos" >

<input name="postcode" onfocus="Clear('postcodeID');"/><span class="warning" id="postcodeID" >Please enter your postcode</span>
<br />
<select name="building" onchange="Clear('buildingID');" >
<option value="Please Select" >Please Select</option>
<option value="1" >1</option>
</select><span class="warning" id="buildingID" >Please select your building type</span>
<br />
<input name="consumption" onfocus="Clear('consumptionID');" /><span class="warning" id="consumptionID" >Please enter your annual consumption</span>
<br />
<input type="button" name="" value="TEST" onmouseup="validateForm()" />
</form>
</body>

</html>

see also

http://www.vicsjavascripts.org.uk/FormCompendium/MarkFailingFields.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum