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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    small problem with this code. can anyone help?

    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>
    Attached Images Attached Images  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by kevinfoleycork View Post
    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?

    Code:
    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?

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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/pro...visibility.asp
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    EDIT: validation error.

    Code:
    <!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>
    Last edited by Henley; 03-11-2009 at 03:12 PM.

  • Users who have thanked Henley for this post:

    kevinfoleycork (03-11-2009)

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thats exactly what i wanted.

    Thanks a mill

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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??


    Code:
    <!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>

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Move everything in between your
    Code:
    <script type="text/javascript">	
    
    </script>
    into a file with a .js extension and then add an src attribute to your script tag like
    Code:
    <script type="text/javascript" src="path-your-new-file-/name-of-file.js"></script>
    Last edited by abduraooft; 03-11-2009 at 05:55 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Move everything in between your
    Code:
    <script type="text/javascript">	
    
    </script>
    into a file with a .js extension and then add an src attribute to your script tag like
    Code:
    <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

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post your current html and javascript separately?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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