Adding Verification Before Submit 1

[PCHomepage]

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?

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:

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;
}

 

[vacunita]

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

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

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

 

[PCHomepage]

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.

 

[PCHomepage]

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.

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;
    }
}

 

[vacunita]

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:

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.

[COLOR=#a6a6a6]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;
  }[/color]
  else{
[indent]if(myValidation()){[/indent]
           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

 

[PCHomepage]

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

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:

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

 

[vacunita]

It works for me with this quick test.

<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

 

[PCHomepage]

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 [bold]onsubmit="return validateFormOnSubmit(this);"[/bold] with "this" inside the parenthesis. Could that have something do so with it?

 

[vacunita]

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

 

[PCHomepage]

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):

ReferenceError: error is not defined
return error;

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.

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

 

[PCHomepage]

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 [italic]error not defined[/italic] when it is?

ReferenceError: error is not defined
return error;

The enhanced line below is the one the error indicates.

[COLOR=gray]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';
    }[/color]
    [bold]return error;[/bold]
[COLOR=gray]}[/color]

 

[PCHomepage]

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.

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;
}

 

[vacunita]

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