[SOLVED] Regarding to VirtueMart 2.0.24 issue with E-Mail validation.

[BluCloud Group]

Dear Forum members,

We are developing one e-store for local publishing house and we are really happy with the VirtueMart 2.0.24 system and it works really good for us, but we are facing one minor problem:

1.) E-mail field, which is published on the "Bill To" form (Shopper Fields: Field Type -> 'emailaddress') is not validated by the system. It recognizes when field is empty and gives you a notification that you have to fill in "Required" field, but still allows you to move forward to order confirmation when you enter some text i.e: "emailtext" to E-mail field and press "Save".

Maybe we can do something about it together, because reading and looking the answers from the forum haven't got us any results.

Does anybody has ideas or solutions for this issue?

[BluCloud Group]

Dear Forum members,

We have [Solved] this issue by adding the E-Mail validator to file: /components/com_virtuemart/views/user/tmpl/edit_address.php

Solution for this is following:

1.) Please use your Mozille Firefoz "Firebug" or Google Chrome "Inspect Element" tool to get the "ID" of your e-mail address field. For example in our case the id for e-mail address field was: "email_field".
2.) Open file located at /components/com_virtuemart/views/user/tmpl/edit_address.php.
3.) Add custom code (marked with red) under/below the following code in your edit_address.php file:

function myValidator(f, t) {
      f.task.value = t; //this is a method to set the task of the form on the fTask.
      if (document.formvalidator.isValid(f)) {
         f.submit();
         return true;
      } else {
         var msg = '<?php echo addslashes (JText::_ ('COM_VIRTUEMART_USER_FORM_MISSING_REQUIRED_JS')); ?>';
         alert(msg + ' ');
      }
      return false;
   }

function checkEmail() {
var email = document.getElementById('email_field');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please insert correct e-mail address.');
email.focus;
return false;
}
}

4.) Now you can see from the custom code above, where the field id is located in the code (email_field) - it's marked with the color blue. Also you can see the alert message (Please insert correct e-mail address.), which is marked with the color green - it's shown to the client/user when the she/he is inserting the wrong e-mail address.

5.) Now we have the validator set up, but the "Save" button has to recognize it as well, so we add to the following code a customized onclick="javascript:return checkEmail();" function:

Original code:

<button class="<?php echo $buttonclass ?>" type="submit" onclick="javascript:return myValidator(userForm, '<?php echo $this->fTask; ?>');"><?php echo JText::_ ('COM_VIRTUEMART_SAVE'); ?></button>

Replace the onclick="javascript:return myValidator(userForm, '<?php echo $this->fTask; ?>'); with onclick="javascript:return checkEmail();":

<button class="<?php echo $buttonclass ?>" type="submit" onclick="javascript:return checkEmail();"><?php echo JText::_ ('COM_VIRTUEMART_SAVE'); ?></button>

6.) Save your modifications for the edit_address.php file and overwrite file at: /components/com_virtuemart/views/user/tmpl/edit_address.php.

Enjoy!

If you have any questions or comments - please don't hesitate to contact us.

[BluCloud Group]

Dear Forum members,

We have made some improvements for this solution:

Improved and more efficient solution for this is following:

1.) Please use your Mozille Firefoz "Firebug" or Google Chrome "Inspect Element" tool to get the "ID" of your e-mail address field. For example in our case the id for e-mail address field was: "email_field".
2.) Open file located at /components/com_virtuemart/views/user/tmpl/edit_address.php.
3.) Add custom code (validation) improvements (marked with red) for the original code (marked with blue) in your edit_address.php file:

function myValidator(f, t) {
      f.task.value = t; //this is a method to set the task of the form on the fTask.
      var email = document.getElementById('email_field');
                var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (!filter.test(email.value)) {
        alert('Please insert correct e-mail address.');
        email.focus;
        return false;
        }
      else if (document.formvalidator.isValid(f)) {
         f.submit();
         return true;
      } else {
         var msg = '<?php echo addslashes (JText::_ ('COM_VIRTUEMART_USER_FORM_MISSING_REQUIRED_JS')); ?>';
         alert(msg + ' ');
      }
      return false;
   }


4.) Now you can see from the custom code above, where the field id is located in the code (email_field) - it's marked with the color orange. Also you can see the alert message (Please insert correct e-mail address.), which is marked with the color green - it's shown to the client/user when the she/he is inserting the wrong e-mail address.

5.) In this case you don't have to change anything for the "Save" button and solution works for you even smoothly than the one we suggested in the first place.

Enjoy!

If you have any questions or comments - please don't hesitate to contact us.