INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Adding Verification Before Submit

Adding Verification Before Submit

(OP)
I am a back-end programmer so don't know JavaScript very well other than the very basics so I am unsure how to add a feature to some existing code. The form has a number of field verifications to be sure that everything is filled but I also want to add a final message where selecting OK will allow the form to submit. What I am unsure of is how to do it so that it pops up only after everything else has been properly filled.

Below is the JavaScript it is now and it is also calling other custom functions for the specific "reason" messages. Any ideas?

CODE --> JavaScript

function validateFormOnSubmit(theForm) {
var reason = "";

  reason += validateName(theForm.Name);
  reason += validatePrefix(theForm.Prefix);
  reason += validateTelephone(theForm.Telephone);
  reason += validateEmail(theForm.EMail);
  reason += validateAddress(theForm.Address);
  reason += validateCity(theForm.City);
  reason += validateState(theForm.State);
  reason += validateCaptcha(theForm.VerifyCode);
 
  if (reason != "") {
    alert("Some fields need correction:\n\n" + reason);
    return false;
  }

  return true;
} 

Here is an example of one of the other functions:

CODE --> JavaScript

function validateName(fld) {
    var error = "";

    if (fld.value.length == 0) {
        fld.style.background = 'Yellow';
        error = "Please enter your first and last name.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
} 

RE: Adding Verification Before Submit

Just add after the "Some fields need correction" message in the same format.

CODE

if (reason != "") {
    alert("Some fields need correction:\n\n" + reason);
    return false;
  }
alert("All fields have been correctly filled in.");
return true;

You could add an else{} block with the alert if you want to instead.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Adding Verification Before Submit

(OP)
I think an else block with an alert is more along the lines of what I need but I'll go ahead and try your suggestion first. Thank you.

RE: Adding Verification Before Submit

(OP)
I got it working easily and online with an else{} block but since it is an agreement, it would be better if it had a Cancel button too. I tried using confirm() rather than alert() which did indeed provide the button but it also seemed to be submitting the form even when Cancel was pressed, causing many PHP errors when submitted without the proper values.

If I wanted it to run a custom function in the else{} block would something like this work? It doesn't look quite right to me but then, as I said, I know little about JavaScript! It seems to be missing something.

CODE --> JavaScript

function myValidation() {
    var msg = confirm("PLEASE READ!\n\nBy clicking the OK button below, you are confirming . . ..");
    if (msg == true) {
        return true;
    } else {
        return false;
    }
} 

RE: Adding Verification Before Submit

Yes, that's correct. You can call your function in your else block just the same. But you'll need to check for the return value of your function anyway.

You can simplify that to:

CODE

function myValidation() {
    return confirm("PLEASE READ!\n\nBy clicking the OK button below, you are confirming . . ..");
    
} 

and then just validate it when you call it.

CODE

function validateFormOnSubmit(theForm) {
var reason = "";

  reason += validateName(theForm.Name);
  reason += validatePrefix(theForm.Prefix);
  reason += validateTelephone(theForm.Telephone);
  reason += validateEmail(theForm.EMail);
  reason += validateAddress(theForm.Address);
  reason += validateCity(theForm.City);
  reason += validateState(theForm.State);
  reason += validateCaptcha(theForm.VerifyCode);
 
  if (reason != "") {
    alert("Some fields need correction:\n\n" + reason);
    return false;
  }
  else{
if(myValidation()){
return true; } return false; } }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Adding Verification Before Submit

(OP)
I have the code below but it seems to submit without the confirm as long as I've filled the other fields.

CODE --> JavaScript

function validateFormOnSubmit(theForm) {
var reason = "";

  reason += validateName(theForm.Name);
  reason += validatePrefix(theForm.Prefix);
  reason += validateTelephone(theForm.Telephone);
  reason += validateEmail(theForm.EMail);
  reason += validateAddress(theForm.Address);
  reason += validateCity(theForm.City);
  reason += validateState(theForm.State);
  reason += validateZip(theForm.ZipCode);
  reason += validateCaptcha(theForm.VerifyCode);

  if (reason != "") {
    alert("Some fields need correction:\n\n" + reason);
    return false;
  } else {
	if (myValidation()) {
            return true;
	}
   return false;
  }
} 

The function with the message is simply:

CODE --> JavaScript

function myValidation() {
    return confirm("PLEASE READ!\n\nBy clicking the OK button below, you are confirming . . . ");
} 

RE: Adding Verification Before Submit

It works for me with this quick test.

CODE

<script type="text/javascript">
function myValidation() {
    return confirm("PLEASE READ!\n\nBy clicking the OK button below, you are confirming . . . ");
} 

function submitForm()
{

	if(myValidation())
	{
		return true;
	}
	
        return false;
	
}
</script>

<form action="google.com" method="post" onSubmit="return submitForm();">
<input type="text" name="search">
<input type="submit" name="find" value="Go">
</form> 

Have you checked the console for any potential errors that may be interfering?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Adding Verification Before Submit

(OP)
I temporarily removed all the other field testing (which were all working) and still can't get it to work. It simply submits the form. I am calling it slightly differently though with onsubmit="return validateFormOnSubmit(this);" with "this" inside the parenthesis. Could that have something do so with it?

RE: Adding Verification Before Submit

No, the parameter you send to the function should be irrelevant.

The reason its submitting is because the function is not returning a false value to stop it from submitting. That's either due to an error, or because its actually not returning false.

Check the console for JS errors that may be preventing the function form completing correctly.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Adding Verification Before Submit

(OP)
FireBug is indeed showing errors. There are two although the first one is on something not even being called to do with the original field validations which are working when not remarked out as they are now so I'm not sure why there is an error. The second is directly related to the frmValidation function (note, I renamed it):

Quote (FireBug)

ReferenceError: error is not defined
return error;

Quote (FireBug)

ReferenceError: frmValidation is not defined
if (frmValidation()) {

Just to clarify, these bits of code are in included scripts rather than being inserted directly into the HTML. The error messages are in one script while the code calling them is in another. I did it this way because there are several forms using the same error messages but the code calling them is different so I kept them separate.

CODE --> HTML

<script src="/scripts/processform.js"></script>
<script src="/scripts/fieldvalidations.js"></script> 

RE: Adding Verification Before Submit

(OP)
I just took a look at the first error to see what's causing it but I am somewhat mystified. It's not directly related to the main question here but getting it fixed might help minimize the possibility of it causing secondary issues. Why would it say error not defined when it is?

Quote (FireBug)


ReferenceError: error is not defined
return error;

The enhanced line below is the one the error indicates.

CODE --> JavaScript

function checkName(obj) {
  var error = "";
  var nameFilter = /^[\S]+(\s[\S]+)*$/ ;
    if (obj.value == "") {
        obj.style.background = 'Yellow';
        error = "Please enter your first and last name.\n";
    } else if (!nameFilter.test(obj)) {
		obj.style.background = 'Yellow';
		error = "Please enter your first and last name.\n";
    } else {
        obj.style.background = 'White';
    }
    return error;
} 

RE: Adding Verification Before Submit

(OP)
Never mind, I realized that it was an old error that the console kept from something else. I don't use FireBug very often so had forgotten that the errors need to be cleared. Sorry!

On the main problem, it seems to be working now as there appeared to be an out of place bracket.

CODE --> JavaScript

function validateFormOnSubmit(theForm) {
	var reason = "";

	reason += validateName(theForm.Name);
	reason += validatePrefix(theForm.Prefix);
	reason += validateTelephone(theForm.Telephone);
	reason += validateEmail(theForm.EMail);
	reason += validateAddress(theForm.Address);
	reason += validateCity(theForm.City);
	reason += validateState(theForm.State);
	reason += validateZip(theForm.ZipCode);

	if (reason != "") {
		alert("Some fields need correction:\n\n" + reason);
		return false;
	} else {
		if (frmValidation()) {
			return true;
		}
	}
	
	return false;
} 

RE: Adding Verification Before Submit

Glad you found the issue.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close