Forcing a user to fill out sections in a form 1

UncleMortis · Feb 21, 2004

Hi, I'm creating a tiny form ,(about 4 questions, name last name, etc)but I want it so that the person has to fill out all the sections. The javascript book I've got goes into forms but swerves away from what I'm after. I need it so that if the person doesn't fill a bit in, then it tells them they have missed something and to fix it. Would I use the onblur onfocus events to do this?

mcowen · Feb 21, 2004

One way of doing this would be a check on submit for whether the input field has text or not. If you give an element of the form an id then use the following to check if a field is empty.

if (document.getElementById("namefield&quot

.value == "&quot

{
alert("Name not entered&quot

;
}

No need here for using events.

tviman · Feb 21, 2004

The easiest way to do this is to attach the for validation to the submit button. Here's and example:

Your form might look something like this:

<form name="myForm" method="post" action="

http://www.yoursite.com/cgi-bin/processing.pl"

onSubmit="return formValidate(this)">
<input type="text" name="fname"><br>
<input type="text" name="lname">
</form>

and the validation scripot would look like this:

function formValidate(){
if (document.fname.value.length == 0) {
alert("Please enter your first name&quot

;
document.fname.focus();
return (false);
}

if (document.lname.value.length == 0) {
alert("Please enter your last name&quot

;
document.lname.focus();
return (false);
}
}

What this does is test the length of each text box. If the length is 0 then nothing was entered - not even a blank space. Then the focus is placed back on the "offending" element so your user doesn't have to guess at it. If the value is greater than 0, it is assumed that text is entered. You can go further and test for numbers only (like a zip code), for alpha characters only, or a combination of alpah and numeric.

There's always a better way. The fun is trying to find it!

UncleMortis · Feb 21, 2004

Thanks guys. I haven't played with javascript for a while and the gears in my mind were starting to lock trying to think of a solution, lol. Besides which it was a little bit above my skill level.

UncleMortis · Feb 21, 2004

I can't get it to work, it still sends when I click the submit button, so I'm assuming the code to alert the user to missing info has gone wrong. where am I going wrong? I've pasted the code below, any help?

Code:

<html>
<head>
<script language=javascript>
function formValidate(){
 if (document.FirstName.value.length == 0) {
     alert(&quot;Please enter your first name&quot;);
     document.FirstName.focus();
     return (false);
 }
 if (document.LastName.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.LastName.focus();
     return (false);
 }
 if (document.ValidEmail.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.ValidEmail.focus();
     return (false);
 }
 if (document.UserName.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.UserName.focus();
     return (false);
 }
 if (document.KocUrl.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.KocUrl.focus();
     return (false);
 }
 if (document.lname.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.lname.focus();
     return (false);
 }
 if (document.country.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.country.focus();
     return (false);
 }
 if (document.agreement.value.length == 0) {
     alert(&quot;Please enter your last name&quot;);
     document.agreement.focus();
     return (false);
 }
}

</script>
   </head>
<body>
<form name=&quot;myForm&quot;action=&quot;mailto:blah@blah.com?subject=Joining MortisLegion&quot;;onSubmit=&quot;return formValidate(this)&quot;>&quot; method=POST>

<table>

<tr>
<td>First Name:</td>
<td><input name=FirstName></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input name=LastName></td>
</tr>

<tr>
<td>Valid Email Address:</td>
<td><input name=ValidEmail></td>

<tr>
<td>Koc UserName:</td>
<td><input name=UserName></td>
</tr>

<td>Your Koc recruitment link:</td>
<td><input name=KocUrl size=49 maxlength=55></td>
</tr>

<tr>
<td>What country are you from?</td>
<td><input name=country></td>
</tr>

<tr>
<td>How did you hear about the MortisLegion alliance?</td>
<td><select name=HeardAboutUs>
         <option>Friend already on MortisLegion
         <option>Word of Mouth
         <option>Stumbled across it
         <option>Link on paulmayo.endofinternet.org
        </select>
</td>
</tr>

<tr>
<td><input type=checkbox name=agreement> Ticking the box means you agree to the rules and wish to join MortisLegion, acknowledging that you could be suspended or deleted if you breach any of the rules. </td>
</tr>
<tr>
<td><input type=submit value=&quot;Submit Form&quot;></td><td><input type=button value=&quot;Reset&quot;></td>
</tr>

</table>
</form>
</body>
</html>

GUJUm0deL · Feb 21, 2004

UncleMortis, your not refrencing the form name in the code. The correct syntax is document.formName.fieldName.value, if you look in your code your not calling the form name.

Plus, in your <form> tag you have a mistake. <form name="myForm"action="mailto:blah@blah.com?subject=Joining MortisLegion";onSubmit="return formValidate(this)">" method=POST> The portion in teal should not be there.

This should work for you:

<html>
<head>
<script language=javascript>
function formValidate(){
if (document.myForm.FirstName.value.length == 0) {
alert("Please enter your first name&quot

;
document.myForm.FirstName.focus();
return (false);
}
if (document.myForm.LastName.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.LastName.focus();
return (false);
}
if (document.myForm.ValidEmail.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.ValidEmail.focus();
return (false);
}
if (document.myForm.UserName.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.UserName.focus();
return (false);
}
if (document.myForm.KocUrl.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.KocUrl.focus();
return (false);
}
if (document.myForm.lname.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.lname.focus();
return (false);
}
if (document.myForm.country.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.country.focus();
return (false);
}
if (document.myForm.agreement.value.length == 0) {
alert("Please enter your last name&quot

;
document.myForm.agreement.focus();
return (false);
}
}

</script>
</head>

<body>
<form name="myForm"action="mailto:blah@blah.com?subject=Joining MortisLegion" onSubmit="return formValidate(this)" method="POST">
<table>
<tr>
<td>First Name:</td>
<td><input name=FirstName></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input name=LastName></td>
</tr>

<tr>
<td>Valid Email Address:</td>
<td><input name=ValidEmail></td>

<tr>
<td>Koc UserName:</td>
<td><input name=UserName></td>
</tr>

<td>Your Koc recruitment link:</td>
<td><input name=KocUrl size=49 maxlength=55></td>
</tr>

<tr>
<td>What country are you from?</td>
<td><input name=country></td>
</tr>

<tr>
<td>How did you hear about the MortisLegion alliance?</td>
<td><select name=HeardAboutUs>
<option>Friend already on MortisLegion
<option>Word of Mouth
<option>Stumbled across it
<option>Link on paulmayo.endofinternet.org
</select>
</td>
</tr>

<tr>
<td><input type=checkbox name=agreement> Ticking the box means you agree to the rules and wish to join MortisLegion, acknowledging that you could be suspended or deleted if you breach any of the rules. </td>
</tr>
<tr>
<td><input type=submit value="Submit Form"></td><td><input type=button value="Reset"></td>
</tr>

</table>
</form>
</body>
</html>

_{____________________________________

Just Imagine.

http://www.imajinarts.com}

GUJUm0deL · Feb 21, 2004

PS -- there are ways to make this code a lot easier to read, and clean. One technique is create a var in the begining of your code and asign the value of document.formName, then simply call that var name, this makes it easier then to type document.formName over, and over, and over again.

Example:
<script>
function checking() {

var gM = document.formName;

if(gM.firstName.value == 0) {
alert("Please enter a name&quot

;
gM.firstName.focus();
return false;
}
}
</script>

_{____________________________________

Just Imagine.

http://www.imajinarts.com}

BillyRayPreachersSon · Feb 22, 2004

You could also use the "very much maligned and misunderstood *" "with" construct:

<script>
function checking() {
with (document.formName) {
if(firstName.value == 0) {
alert("Please enter a name&quot

;
firstName.focus();
return (false);
}
}
}
</script>

Dan

* Any reference to a cheesy 80s pop song is purely intentional ;o)

UncleMortis · Feb 22, 2004

Thanks so much GUJUm0deL. As I said Earlier I haven't had much experience with Javascript and I've been lazy lately and not keeping up with teaching myself. What you've shown me is just above what I should/did/used to know and I always end up being a tad off with my javascript what you've shown made sense even to me,lol. Thank you very much.

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!

Forcing a user to fill out sections in a form 1

UncleMortis

Programmer

mcowen

Programmer

tviman

Programmer

UncleMortis

Programmer

UncleMortis

Programmer

GUJUm0deL

Programmer

GUJUm0deL

Programmer

BillyRayPreachersSon

Programmer

UncleMortis

Programmer

Similar threads

Part and Inventory Search

Sponsor