Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Display Message Within Div

    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

    Code:
    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;
      }
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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/Fo...lingFields.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ben1390 (07-03-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •