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

    Unable to validate html forms using external javascript

    Hi guys..

    I am a newbie trying to generate an alert message when a user leaves a username filed blank in an html form using an external javascript.

    Following is the code for html file.
    Code:
    <HTML>
    <TITLE>trial alert</TITLE>
    <HEAD>
    	<script language="JavaScript" src="sample.js" type="text/javascript"></script>
    </HEAD>
    
    <BODY>
    <form name = "myform" onSubmit = "test()">
    <P>
    Username : <INPUT TYPE="text" Username ="visitor_username" SIZE="20" 
    hspace="20"><br>
    First Name: <INPUT TYPE="text" FIRST NAME="visitor_name" SIZE="20" 
    hspace="20"><br>
    
    <INPUT TYPE="radio" NAME="gender1" VALUE="male"> Male<br>
    <INPUT TYPE="radio" NAME="gender2" VALUE="female"> Female<br>
    
    <INPUT TYPE="submit" VALUE="submit">
    </form>
    </BODY>
    </HTML>
    The code for the external javascript file is:
    Code:
    function test(){
    if(document.myform.visitor_username.value==""){
    alert("enter a username");
    }
    }
    However, if I swap the positions of the username and first name i.e. place the first name before the username, I do get an alert message if the first name is left empty.

    Folks, I do not wish to hijack an existing thread. Please let me know if there is an existing thread on this issue..(I could not find one).
    Please advice.
    Thanks.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    There is a thread somewhere, but I saved the script from it anyway, so here. You should be able to pick out what you need. I didn't write it.

    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)
    			{
     document.images[alertImgs[0]].style.visibility = "visible";	
    			setTimeout( doAlert0,1000);
    			 
    			 return false;
    			}
    		if (nSurName.value.replace(/\s/g, "").length < 1)
    			{
    			 
    			 document.images[alertImgs[0]].style.visibility = "visible";
    			setTimeout( doAlert1,1000);
    			 return false;
    			}
    		if (!/[\d\s-]+$/.test(nMobile.value) || !/\d{10}/.test(nMobile.value.replace(/[\s-]/g, ""))) // must contain 10 digits;
    			{
    			 	
    			 document.images[alertImgs[0]].style.visibility = "visible";
    			setTimeout( doAlert2,1000);
    			 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))
    			{
    			 
    			 document.images[alertImgs[0]].style.visibility = "visible";
    			setTimeout( doAlert3,1000);
    			 return false;
    			}
    		if (nForm['comments'].value == "")
    			{
    			 
    			 document.images[alertImgs[0]].style.visibility = "visible";
    			setTimeout( doAlert4,1000);
    			 return false;
    			}
    		alert('Thank you for your submission');
    		return true;
    	}
    function doAlert0(){alert('Please enter your first name')}
    function doAlert1(){alert('Please enter your last name');}
    function doAlert2(){alert('Please enter your mobile phone number');}
    function doAlert3(){alert('Please enter a valid Email');}
    function doAlert4(){alert('Please write a comment');}
    	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 == "http://i43.tinypic.com/20kswnl.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;}
     	p {font-family: tahoma; font-size: 7pt; color: #ff0000; }
    	p2 {font-family: tahoma; font-size: 11pt; color: #00008b; }
    	.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>Comment Box</legend>	
    <label>First Name: <input type="text" name="firstName" size="42" class=""></label>
    <label>Last  Name: <input type="text" name="surName" size="42" class=""></label>
    <label>Phone # : <input type="text" name="mobile" size="42" class=""></label>				
    <label><p><p2>Your Email:</p2> * Your Email will remain private</p><input type="text" name="email" size="42" class=""></label>
    <label><p><p2>Comments:</p2>* Keep your comments nice, please</p></label>
    <textarea rows="5" cols="42" name="comments" class="comment"></textarea>				
    <input type="submit" name="submit" value="Submit" class="submitBtn">
    <center><img src="http://i43.tinypic.com/20kswnl.gif" class="alertImg"></center>
    </fieldset>
    </form>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Here you go:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/" />
    <style type="text/css">
    body
    {
    font-size: 12px;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function onFormSubmit(form_element)
    	{
    	var ok = true;
    	var error_msgs = new Array();
    
    	if (!form_element.visitor_username.value)
    		{
    		error_msgs.push("Please enter a valid username.");
    		ok = false;
    		}
    	if (!form_element.visitor_name.value)
    		{
    		error_msgs.push("Please enter a valid name.");
    		ok = false;
    		}
    	if (!form_element.gender[0].checked && !form_element.gender[1].checked)
    		{
    		error_msgs.push("Please select a gender.");
    		ok = false;
    		}
    
    	document.getElementById("error_message").innerHTML = error_msgs.join("<br />");
    	return ok;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <form onsubmit="return onFormSubmit(this)">
    	<input type="text" name="visitor_username" /><br />
    	<input type="text" name="visitor_name" /><br />
    	Male:<input type="radio" name="gender" value="m" /> &nbsp; Female:<input type="radio" name="gender" value="f" /><br />
    	<input type="submit" value="submit" />
    </form>
    
    <div id="error_message" style="color:#ff0000;"></div>
    
    </body>
    </html>
    You can throw the red JS into an external file and it will work exactly the same.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    sunil_2215 (03-24-2009)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Try this as another alternative:-

    Code:
    <HTML>
    <TITLE>trial alert</TITLE>
    <HEAD>
    </HEAD>
    
    <BODY>
    <form name = "myform" onSubmit = "return test()">
    
    Username : <INPUT TYPE="text" name ="visitor_username" SIZE="20" 
    hspace="20"><br>
    First Name: <INPUT TYPE="text" name ="visitor_name" SIZE="20" 
    hspace="20"><br>
    
    <INPUT TYPE="radio" NAME="gender" VALUE="male"> Male<br>
    <INPUT TYPE="radio" NAME="gender" VALUE="female"> Female<br>
    
    <INPUT TYPE="submit" VALUE="submit">
    </form>
    
    <script type = "text/javascript">
    
    function test(){
    var un = document.myform.visitor_username.value;
    un = un.replace(/^\s+|\s+$/g,"");  // strip leading and trailing sapces
    un = un.replace(/[^a-z0-9]/gi,"");  // strip characters apart from a-z A-Z 0-9 (no ? * ! $ etc. allowed)
    if (un.length < 4) {
    alert ("User name must be at least three characters");
    return false
    }
    
    var visn = document.myform.visitor_name.value;
    visn = visn.replace(/^\s+|\s+$/g,"");  // strip leading and trailing sapces
    visn = visn.replace(/[^a-z'-]/gi,"");  // strip characters apart from a-z apostrophe hyphen  Mary-Lou Tom O'Flanaghan
    if (visn.length < 2) {
    alert ("Visitor name must be at least two characters");
    return false;
    }
    
    if ((document.myform.gender[0].checked == false) &&  (document.myform.gender[1].checked == false)) {
    alert ("You must select your gender");
    return false;
    }
    return true;  // this is the default so not actually required
    }
    </script>
    </BODY>
    </HTML>
    Note that I have stripped leading and trailing spaces and eliminated inappropriate characters. Also specified a minimum length to avoid accepting a single letter. Naturally you can alter this to taste.
    Validations of the form if (username == "") or if (!username) are hardly worthy of the name as even a single space or a ? will return false (i.e. pass the validation).

    Note also that all the radio buttons in a group must have the same name.


    Tourist in hotel in Jasper, Alberta, Canada: " Do we need to convert our Canadian currency into British pounds when we go on to British Columbia?"
    Last edited by Philip M; 03-24-2009 at 04:31 PM. Reason: typo

  • Users who have thanked Philip M for this post:

    sunil_2215 (03-24-2009)

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thank you guys...

    Thanks guys for your inputs...
    It sure has helped me a lot.


  •  

    Tags for this Thread

    Posting Permissions

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