Form Submitting without Validation firing

Using Validation Toolkit version 2.3.5 I've added Behaviors on a Checkout Cart 5 page to fields such as the CC Number field. These applied the behavior at the field level such as :

<input name="cc_number" type="text" id="cc_number" onblur="WAValidateCC(document.forms[0].cc_number,document.forms[0].cc_number.value,'- Invalid credit card number','','4:51:52:53:54:55:34:37:6011:',document.forms[0].cc_number,0,true)" value="" />

In the form tag there is the Behavior to show any errors :

<form  action="confirm.php" method="post" name="ecart_checkout_form" onsubmit="WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,false,false);return document.MM_returnValue">

Here is the eCart code on the same page:

<?php

require_once( "webassist/framework/library.php" );

require_once( "webassist/framework/framework.php" );

?>



<?php

//WA eCart Include

require_once("WA_eCart/eCart1_PHP.php");

?>



<?php

$eCart1->GetContent();

?>







<?php

if ($eCart1->IsEmpty())     {

  $eCart1->redirStr = "display.php";

  $eCart1->cartAction = "RedirectIfEmpty";

}

?>





<?php

// WA eCart Redirect

if ($eCart1->redirStr != "")     {

  header("Location: ".$eCart1->redirStr);

}

?>

Why or what is causing the client side validation to not be called prior to the form submission?

the onBlur event and onSubmit events are totally separate, you cannot show validation errors on form submit if the validation is happening onBlur.

to show the errors on the form submit, you need to add the validations to the onSubmit event as well as have the show validation errors behavior on submit.

Thanks Jason,
But I should have mentioned the onBlur was also not producing a response. Maybe not tied to a div to display the message? And should the presence of such a message not prohibit the submission of the form?

you need to add the Show Validation message behavior to the onBlur event.

the validation behavior only checks the value, the Show Validation error behavior shows the error.

using the onblur event will only show an error if the user places the cursor in the field, then changes to another field, that is the only time the on blur event is fired.

if you have the show validation errors behavior added to the onblur event, it will show the message and prevent the user from moving to the next field.

if the user never places the cursor in the form element though, it wont prevent the form from being submitted since the onBlur event will never have occured.

So there is not much benefit from using a client side validation on the various txt fields. Better to use the onSubmit within the form tag and set all your validations in the following order:

topmost - Validate Form
field specific validation
field specific validation
field specific validation
last behavior - Show Validation Error

Is this correct?

yes, that is correct.


the only benefit to using validation on the onBlur event is to give the user real time feed back as they fill the form in, it wont prevent the form from being submitted though, to prevent the form being submitted, you need to apply the validation to the onsubmit event