View Full Version : Disable Submit until form is complete

10-27-2003, 07:48 PM
I have a form in which all fields must be complete. I've written a simple code that determines whether or not all fields have been completed. If all the fields are completed, then you are sent to a new page.

The button will let you know if you have an empty field, but even if there are empty fields, it sends you to the next page. For now, i've made the validation script and the script that sends you to the next page separate buttons. I'd like this all to be taken care of with one button click.

Is there any way that I can put both of these scripts on one submit button?

Here's my code:


function go() {

function checkit() {

if(document.soac.FirstName.value =="") {
alert("Please enter first name");
return false;

if(document.soac.LastName.value =="") {
alert("Please enter last name");
return false;

if(document.soac.MailAddress.value =="") {
alert("Please enter your address");
return false;

if(document.soac.email.value.indexOf("@") == -1 || document.soac.email.value == "") {
alert("Please enter email address.");
return false;

if(document.soac.email.value != document.soac.emailconfirm.value) {
alert("Confirm E-mail address.");
return false;

if(document.soac.PhoneNumber.value =="") {
alert("Please enter your phone number");
return false;

if(document.soac.HighschoolAttend.value =="") {
alert("Please enter your Highschool");
return false;

if(document.soac.FatherOccupation.value =="") {
alert("Please enter your Father's Occupation");
return false;

if(document.soac.MotherOccupation.value =="") {
alert("Please enter your Mother's Occupation");
return false;
} else {


function checkCR(evt) {

var evt = (evt) ? evt : ((event) ? event : null);

var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

if ((evt.keyCode == 13) && (node.type=="text")) {return false;}


document.onkeypress = checkCR;

Any help appreciated. Please keep in mind that I am kinda new to JavaScripting...Thanks.

10-28-2003, 09:25 AM
The way you must call a verifying function from submit is to use a return true/false condition, which will deny the submit process until the conditions are fulfiled:

function verify(){
if (condition fulfiled){return true}
else if (condition failed){return false}

<form onsubmit = "return verify()">

10-28-2003, 07:02 PM
Ashley...here's a simple validator, with some commenting and a few tricks. Hope it helps. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

<script type="text/javascript" language="javascript">

function checkit(oForm) //get form object
var msg = ''; //msg starts as empty string

if (oForm.FirstName.value == "") //if error, add to string (+=)
msg += "\nNo ~ First Name ~ entered";

if (oForm.LastName.value == "")
msg += "\nNo ~ Last Name ~ entered";

if (oForm.MailAddress.value == "")
msg += "\nNo ~ Mailing Address ~ entered";

if (oForm.email.value == "")
msg += "\nNo ~ E-mail address ~ entered";

if (oForm.email.value != "" && oForm.email.value.indexOf("@") == -1)
msg += "\nInvalid ~ E-mail address ~";

if (oForm.email.value != "" && oForm.email.value != oForm.emailconfirm.value)
msg += "\n~ Confirm E-mail address ~ is different";

if (oForm.PhoneNumber.value == "")
msg += "\nNo ~ Phone Number ~ entered";

if (oForm.HighschoolAttend.value == "")
msg += "\nNo ~ High School Attended ~ entered";

if (oForm.FatherOccupation.value == "")
msg += "\nNo ~ Father's Occupation ~ entered";

if (oForm.MotherOccupation.value == "")
msg += "\nNo ~ Mother's Occupation ~ entered";

if (msg != '') //any errors?
msg = 'The following errors were detected:\n\n' + msg;
msg += '\n\n\nPlease complete and re-submit. Thank you.\n';
return false; //stop submission
return confirm('Complete! Submit this data?'); //do it - or not

function checkCR(evt)
var evt = (evt) ? evt : (event) ? event : null;
var node = (evt.target) ? evt.target : (evt.srcElement) ? evt.srcElement : null;
if (evt && node && evt.keyCode == 13 && node.type == 'text')
return false;

document.onkeypress = checkCR;

<form action="javascript&#58;alert('submitted')" method="post" onsubmit="return checkit(this)"><!-- pass form object(this) -->
<input type="text" name="FirstName" value="">____First Name<br /><br />
<input type="text" name="LastName" value="">____Last Name<br /><br />
<input type="text" name="MailAddress" value="">____Mailing Address<br /><br />
<input type="text" name="email" value="">____E-mail address<br /><br />
<input type="text" name="emailconfirm" value="">____Confirm E-mail address<br /><br />
<input type="text" name="PhoneNumber" value="">____Phone Number<br /><br />
<input type="text" name="HighschoolAttend" value="">____High School Attended<br /><br />
<input type="text" name="FatherOccupation" value="">____Father's Occupation<br /><br />
<input type="text" name="MotherOccupation" value="">____Mother's Occupation<br /><br /><br />
<input type="reset" value="clear" onclick="return confirm('Clear all entries?')">
<input type="submit" value="done">

10-28-2003, 08:19 PM
This is awesome dude, exactly what I was looking for, thanks!

One question...I don't understand the oForm...i've seen it before...sorry if that's dumb, im new to this...

10-28-2003, 08:38 PM
Not at all. Was new myself once. This:

<form........onsubmit="return checkit(this)">

...passes the Form object, which represents the form for scripting purposes, to the validator function. It does it because onsubmit is actually a property of Form (a variable, Form.onsubmit). Any JavaScript code running in that property - like a call to a function - can reference that 'owning object' with this. So instead of jumping over to the function, only to need a reference to 'find' the form object that you just left, you 'take it with you'. Notice: no form name necessary.

The 'o' ?

function checkit(oForm)

...just identifies it as a variable holding an object. Makes it easier to keep track as your programs get more involved.

var sMsg ------------------> string
var bWhich ----------------> boolean
var iLoop ------------------> integer