Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

a standard validate form function

Status
Not open for further replies.
tonyx666

tonyx666

MIS
Joined
Apr 13, 2006
Messages
214
Location
GB
hi.. someone kindly gave me the below script that makes sure one of my radio buttons is checked before the user can press submit.. my question is this..
is there a basic procedure that i can use that will place rules on the other form inputs..

so if they do not choose an item from a drop down.. or do not write text in a textbox.. and so on.. also can all of these commands be placed in one function.. as opposed to wrting a separate function for each part of the form validation..

if someone could show me a general snippet that is not to hard to manipulate i would be very grateful.. thanks..

Code: 
<script type="text/javascript">
			<!--
			function doRedirect()
			{
			var groupValue;
			var myOption = -1;
			for (i=document.form.r1.length-1; i > -1; i--) {
			if (document.form.r1[i].checked) {
			groupValue = document.form.r1[i].value;
			myOption = i;
			}
			}
			if (myOption == -1) {
			alert("You must select an option. \n e.g: Take me to Heathrow");
			return false;
			}
			else {return true;}
			}
			-->
		</script>
 
Sort by date Sort by votes
Code: 
function IsFormComplete(FormName)
{
var x       = 0
var FormOk  = true

while ((x < document.forms[FormName].elements.length) && (FormOk))
   {
     if (document.forms[FormName].elements[x].value == '')
     { 
        alert('Please enter the '+document.forms[FormName].elements[x].name +' and try again.')
        document.forms[FormName].elements[x].focus()
        FormOk = false 
     }
     x ++
   }
return FormOk
}

thanks that looks like just the thing i need.. where it says form name.. do i actually put the name of my form.. and also.. which part do i place the name of my input element..

so i have a drop down called choice1 and a textbox called choice2.. where do i put them in this code???

 
Upvote 0 Downvote
ok im attemptin it myself.. the following code isnt working, can someone explain why.. please.. its no fun being a one man conga line..

form
Code: 
<form name="form" method="post" action="sendenquiry.asp" onSubmit="return IsFormComplete();">
					<p class="main">Enquiry Priority:<br>
					<select class="droppy" name="EnqPriority">
						<option value="Casual Enquiry">This is a casual enquiry
						<option value="Urgent Enquiry">This enquiry is urgent
						<option value="Not Urgent Enquiry">This enquiry is not urgent
					</select>
					<p class="main">Contact Name:<br><input type="text" class="txtbox" name="ContactName"></p>
					<p class="main">Email Address:<br><input type="text" class="txtbox" name="EmailAdd"></p>
					<p class="main">Telephone No:<br><input type="text" class="txtbox" name="TelNo"></p>
					<p class="main">Please Enter Your Enquiry:<br><textarea class="area" name="Enquiry" id="Enquiry" rows="1" cols="1"></textarea></p>
					<p><input style="margin-top:15px;margin-bottom:15px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Send Enquiry" name="B1" type="submit"><input style="margin-top:15px;margin-bottom:15px;margin-left:17px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Reset Form" name="B2" type="reset"></p>
				</form>

script
Code: 
	<script language="JavaScript">

function IsFormComplete(form)
{
var x       = 0
var FormOk  = true

while ((x < document.forms[form].ContactName.length) && (FormOk))
   {
     if (document.forms[form].ContactName[x].value == '')
     { 
        alert('Please enter the '+document.forms[form].ContactName[x].name +' and try again.')
        document.forms[form].ContactName[x].focus()
        FormOk = false 
     }
     x ++
   }
return FormOk
}


</script>
 
Upvote 0 Downvote
OK, I gave your codes a quick once-over & I think this should work (unless I typoed or f-got a property):

Code: 
[tt]<form name="EnquiryForm" method="post" action="sendenquiry.asp" onSubmit="IsFormComplete();">
                    <p class="main">Enquiry Priority:<br>
                    <select class="droppy" name="EnqPriority">
                        <option value="Casual Enquiry">This is a casual enquiry</option>
                        <option value="Urgent Enquiry">This enquiry is urgent</option>
                        <option value="Not Urgent Enquiry">This enquiry is not urgent</option>
                    </select></p>
                    <p class="main">Contact Name:<br><input type="text" class="txtbox" name="ContactName"></p>
                    <p class="main">Email Address:<br><input type="text" class="txtbox" name="EmailAdd"></p>
                    <p class="main">Telephone No:<br><input type="text" class="txtbox" name="TelNo"></p>
                    <p class="main">Please Enter Your Enquiry:<br><textarea class="area" name="Enquiry" id="Enquiry" rows="1" cols="1"></textarea></p>
                    <p><input style="margin-top:15px;margin-bottom:15px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Send Enquiry" name="B1" type="submit"><input style="margin-top:15px;margin-bottom:15px;margin-left:17px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Reset Form" name="B2" type="reset"></p>
</form>
[/tt]

Code: 
[tt]<script language="JavaScript">

function IsFormComplete()
{
var x = 0;
var y = 0;
var z = 0;
var FormOk  = true;

if(document.EnquiryForm.inputs)
 {
  while ((x < document.EnquiryForm.inputs.length) && (FormOk))
   {
     if (document.EnquiryForm.inputs[x].value == '')
     {
        alert('Please enter the '+document.EnquiryForm.inputs[x].name +' and try again.');
        document.EnquiryForm.inputs[x].focus();
        FormOk = false;
     };
     x ++;
   };
 };

if(document.EnquiryForm.selects)
 {
  while ((y < document.EnquiryForm.solects.length) && (FormOk))
   {
     if (document.EnquiryForm.slects[y].selectedIndex == '')
     {
        alert('Please select the '+document.EnquiryForm.selects[y].name +' and try again.');
        FormOk = false;
     };
     y ++;
   };
 };

if(document.EnquiryForm.textareas)
 {
  while ((z < document.EnquiryForm.inputs.length) && (FormOk))
   {
     if (document.EnquiryForm.textareas[z].value == '')
     {
        alert('Please enter the '+document.forms[form].textareas[z].name +' and try again.');
        document.EnquiryForm.textareas[z].focus();
        FormOk = false;
     };
     z ++;
   };
 };


return FormOk;
};


</script>
[/tt]



I hope this helps;
Rob Hercules
 
Upvote 0 Downvote
P.S. Are you SURE you want a 1x1 textbox for the enquiry? A 1 letter enquiry jsut seems kinda short to me.
Code: 
[tt]<p class="main">Please Enter Your Enquiry:<br><textarea class="area" name="Enquiry" id="Enquiry" [COLOR=red]rows="1" cols="1"[/color]></textarea></p>[/tt]



I hope this helps;
Rob Hercules
 
Upvote 0 Downvote
lol,, yes the 1x1 is a bit suspect.. u see the prob is that to get the page w3c valid i had to place a col and row to the text area.. but the prob is when i set the size of it using those then they appera dif sizes in ie and ff.. so at the mo i am sizing them with a width and height value..

what do you suggest?

im gonna try your code in the meantime.. thank you..
 
Upvote 0 Downvote
ok i tried replacing the two bits with your code but when you click the submit button with blank entries it doesnt request validation..

here the the url of the page http://www.heathrowminicab.com/x/taxi-enquiry.asp

and here is the code..
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>

	<head>
		<title>Heathrow Taxi | Transfer Booking Enquiry | Airport Travel Service</title>
		<meta name="description" content="Heathrow Airport Taxi Service Enquiry. Reliable 24 Hour Transfers to and from London Heathrow. Online Enquiries, we will provide a custom travel quote at competitive rates.">
		<meta name="keywords" content="heathrow taxi enquiry">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="newstyle.css">
		<script type="text/javascript" src="external.js"></script>
	
	<script language="JavaScript">

function IsFormComplete()
{
var x = 0;
var y = 0;
var z = 0;
var FormOk  = true;

if(document.EnquiryForm.inputs)
 {
  while ((x < document.EnquiryForm.inputs.length) && (FormOk))
   {
     if (document.EnquiryForm.inputs[x].value == '')
     {
        alert('Please enter the '+document.EnquiryForm.inputs[x].name +' and try again.');
        document.EnquiryForm.inputs[x].focus();
        FormOk = false;
     };
     x ++;
   };
 };

if(document.EnquiryForm.selects)
 {
  while ((y < document.EnquiryForm.solects.length) && (FormOk))
   {
     if (document.EnquiryForm.slects[y].selectedIndex == '')
     {
        alert('Please select the '+document.EnquiryForm.selects[y].name +' and try again.');
        FormOk = false;
     };
     y ++;
   };
 };

if(document.EnquiryForm.textareas)
 {
  while ((z < document.EnquiryForm.inputs.length) && (FormOk))
   {
     if (document.EnquiryForm.textareas[z].value == '')
     {
        alert('Please enter the '+document.forms[form].textareas[z].name +' and try again.');
        document.EnquiryForm.textareas[z].focus();
        FormOk = false;
     };
     z ++;
   };
 };


return FormOk;
};


</script>




	</head>

	<body>

		<div id="wrap">

			<div id="top">
				<img class="logo" src="images\Heathrow-Minicab-Logo.jpg" alt="Minicab Logo">
			</div>
		
			<div id="bleft">
				<h1 class="top">Heathrow Transfer Enquiry</h1>
				<form name="EnquiryForm" method="post" action="sendenquiry.asp" onSubmit="IsFormComplete();">
                    <p class="main">Enquiry Priority:<br>
                    <select class="droppy" name="EnqPriority">
                        <option value="Casual Enquiry">This is a casual enquiry</option>
                        <option value="Urgent Enquiry">This enquiry is urgent</option>
                        <option value="Not Urgent Enquiry">This enquiry is not urgent</option>
                    </select></p>
                    <p class="main">Contact Name:<br><input type="text" class="txtbox" name="ContactName"></p>
                    <p class="main">Email Address:<br><input type="text" class="txtbox" name="EmailAdd"></p>
                    <p class="main">Telephone No:<br><input type="text" class="txtbox" name="TelNo"></p>
                    <p class="main">Please Enter Your Enquiry:<br><textarea class="area" name="Enquiry" id="Enquiry" rows="1" cols="1"></textarea></p>
                    <p><input style="margin-top:15px;margin-bottom:15px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Send Enquiry" name="B1" type="submit"><input style="margin-top:15px;margin-bottom:15px;margin-left:17px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Reset Form" name="B2" type="reset"></p>
				</form>
			</div>

			<div id="bright">
				<h1 class="top">Contact Details</h1>
				<p class="main">TELEPHONE NUMBERS<br><br>UK Freephone: <b>0800 505 3231</b><br><br>UK: <b>020 8814 2727</b><br><br>International: <b>+44 (0)20 8814 2727</b><br><br><br>FAX NUMBERS<br><br>UK: <b>020 8399 6500</b><br><br>International: <b>+44 (0)20 8399 6500</b><br><br><br>EMAIL ADDRESSES<br><br>General Enquiries: <b><a href="mailto:info@heathrowminicab.com">info@heathrowminicab.com</a></b><br><br>Sales & Advertising: <b><a href="mailto:sales@heathrowminicab.com">sales@heathrowminicab.com</a></b><br><br><br>POSTAL ADDRESS<br><br>Suite 7,<br>Jolyon House,<br>Amberley Way,<br>Hounslow,<br>Middlesex<br>TW4 6BH<br><br><a rel="external" href="[URL unfurl="true"]http://www.multimap.com/map/browse.cgi?lat=51.4686&lon=-0.4242&scale=50000&icon=x">Click[/URL] here for map</a></p><br><br>

			</div>

		</div>

	</body>

</html>
 
Upvote 0 Downvote
can anyone see why this isnt working..
 
Upvote 0 Downvote
[1]>[tt]onSubmit="IsFormComplete();"[/tt]
[tt]onSubmit="[red]return[/red] IsFormComplete();"[/tt]

[2] There is not such thing as .inputs, closest is .elements.
>[tt]if(document.EnquiryForm.inputs)[/tt]
[tt]if(document.EnquiryForm.[red]elements[/red])[/tt]
>[tt]x < document.EnquiryForm.inputs.length[/tt]
[tt]x < document.[blue]EnquiryForm.length[/blue][/tt]
>[tt]document.EnquiryForm.inputs[x].value == ''[/tt]
[tt]document.EnquiryForm.[red]elements[/red][x].value == ''[/tt]
similar cases etc etc.

[3] select-one element
>[tt]if(document.EnquiryForm.selects)[/tt]
[tt]if(document.EnquiryForm.[red]EnqPriority[/red])[/tt]
>[tt]while ((y < document.EnquiryForm.solects.length) && (FormOk))[/tt]
[tt]while ((y < document.EnquiryForm.[red]EnqPriority[/red].length) && (FormOk))[/tt]
>[tt]if (document.EnquiryForm.slects[y].selectedIndex == '')[/tt]
[tt]if (document.EnquiryForm.selectedIndex == '')[/tt]
(This is useless, will at least return 0 if nothing selected specifically. Note your typos on select is all over!)
>[tt]alert('Please select the '+document.EnquiryForm.selects[y].name +' and try again.');[/tt]
[tt]alert('Please select the '+document.EnquiryForm.EnqPriority[/red].name +' and try again.');[/tt]
(But, this checking is non-sense, selectedIndex would be zero by default in this case!)

I stop... Just note textarea(s): where are they? There is nothing called [red].textareas[/red] as elements... Correct all things along this direction.


 
Upvote 0 Downvote
ok, i have limited the function to one input box so i can take it one step at a time i have made a few changes like you suggested.. they obviously arent totally correct because the form still doesnt validate.. below is the function and the form code..

Code: 
<script language="JavaScript">

function IsFormComplete()
{
var x = 0;
var FormOk  = true;

if(document.EnquiryForm.ContactName)
{
  while ((x < x < document.EnquiryForm.length) && (FormOk))
   {
     if (document.EnquiryForm.ContactName[x].value == '')
     {
        alert('Please enter the '+document.EnquiryForm.ContactName[x].name +' and try again.');
        document.EnquiryForm.ContactName[x].focus();
        FormOk = false;
     };
     x ++;
   };
 };


return FormOk;
};

</script>

form
Code: 
<form name="EnquiryForm" method="post" action="sendenquiry.asp" onSubmit="return IsFormComplete();">
                    <p class="main">Enquiry Priority:<br>
                    <select class="droppy" name="EnqPriority">
                        <option value="Casual Enquiry">This is a casual enquiry</option>
                        <option value="Urgent Enquiry">This enquiry is urgent</option>
                        <option value="Not Urgent Enquiry">This enquiry is not urgent</option>
                    </select></p>
                    <p class="main">Contact Name:<br><input type="text" class="txtbox" name="ContactName"></p>
                    <p class="main">Email Address:<br><input type="text" class="txtbox" name="EmailAdd"></p>
                    <p class="main">Telephone No:<br><input type="text" class="txtbox" name="TelNo"></p>
                    <p class="main">Please Enter Your Enquiry:<br><textarea class="area" name="Enquiry" id="Enquiry" rows="1" cols="1"></textarea></p>
                    <p><input style="margin-top:15px;margin-bottom:15px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Send Enquiry" name="B1" type="submit"><input style="margin-top:15px;margin-bottom:15px;margin-left:17px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Reset Form" name="B2" type="reset"></p>
				</form>
 
Upvote 0 Downvote
Look, I really don't care much if you limit this or that. You must realize you make errors line by line. Have some reading: that's essential.

Just take a look of your new post. What is this?
>[tt]x < x < document.EnquiryForm.length[/tt]

It is your work. Should not you exercise minimum care?

 
Upvote 0 Downvote
im sorry..

i have tried to get it working.. here is my latest attempt.. surely it must be close to being correct

Code: 
<script language="JavaScript">

function IsFormComplete()
{
var x = 0;
var FormOk  = true;

if(document.EnquiryForm.ContactName)
{
  while (( x < document.EnquiryForm.ContactName) && (FormOk))
   {
     if (document.EnquiryForm.ContactName[x].value == '')
     {
        alert('Please enter the '+document.EnquiryForm.ContactName[x].name +' and try again.');
        document.EnquiryForm.ContactName[x].focus();
        FormOk = false;
     };
     x ++;
   };
 };


return FormOk;
};

</script>
 
Upvote 0 Downvote
[tt]function IsFormComplete()
{
var FormOk = true;

if (document.EnquiryForm.ContactName.value == '')
{
alert('Please enter the '+document.EnquiryForm.ContactName.name +' and try again.');
document.EnquiryForm.ContactName.focus();
FormOk = false;
};
return FormOk;
};
[/tt]
 
Upvote 0 Downvote
ok this checks two fields and returns alerts if they are empty.. prob is.. if the name and email are both left blank.. it displays both alerts rite away one after another..

can this be edited so it cheks the name field if empty.. shows the alert then returns to the name field..

then only afta the name field has non zero entry.. it displays the alert for the email..

Code: 
function IsFormComplete()
{
    var FormOk  = true;

    if (document.EnquiryForm.ContactName.value == '')
    {
        alert('Please enter a '+document.EnquiryForm.ContactName.name +'.');
        document.EnquiryForm.ContactName.focus();
        FormOk = false;
    };
    
	if (document.EnquiryForm.EmailAdd.value == '')
    {
        alert('Please enter a '+document.EnquiryForm.EmailAdd.name +'.');
        document.EnquiryForm.EmailAdd.focus();
        FormOk = false;
    };


	return FormOk;
};
 
Upvote 0 Downvote
Make a breakout and early return. This can save the script to work longer once anything undesirable is detected.
[tt]
function IsFormComplete()
{
var FormOk = true;

if (document.EnquiryForm.ContactName.value == '')
{
alert('Please enter a '+document.EnquiryForm.ContactName.name +'.');
document.EnquiryForm.ContactName.focus();
FormOk = false;
[blue]return FormOK;[/blue]
};

if (document.EnquiryForm.EmailAdd.value == '')
{
alert('Please enter a '+document.EnquiryForm.EmailAdd.name +'.');
document.EnquiryForm.EmailAdd.focus();
FormOk = false;
[blue]return FormOK;[/blue]
};


return FormOk;
};
[/tt]
 
Upvote 0 Downvote
my form is blank..
i click submit.. the alert comes up telling me i must enter a contact name.. so i click ok...

then the form just submits and the next page loads rather then focusing back on the contact name field on the form page.

that is using the above code u gave me
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
921
coldbohemia
coldbohemia
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
679
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top