Author Topic: form validation methods different  (Read 6200 times)

287d

  • Beginner
  • *
  • Posts: 45
form validation methods different
« on: July 16, 2009, 06:04:31 am »
Hi Guys,

[J1.5 & VM1.1.3]

Do you know why there's a difference in validation methods? The shipping address form uses error messages while the reg form uses text colour to highlight the error.

A. I would like for the shipping address form validation to behave like VM registration form (turn all labels and box borders red).

B. I would also like ALL labels to turn red in VM as only a few are.


Many Thanks


==========
More Info if it helps:

#1
In Joomla's registration (my default) and empty form submission highlights all mandatory fields red.
[Name, Username, Email, Password, Verify PW - all turn red]


#2
IN VM, new user registration, some fields turn red, others don't.
[All mandatory fields turn red, except Username, Password, Confirm Password == i.e soe of the one's above that DO turn red for joomla]


#3
Finally an empty submission in VM's add new shipping address does NOT turn any field labels red, in stead you get an error message:
Quote
Error: Please enter a value into the Field "Address Nickname"
Error: Please enter a value into the Field "First Name"
Error: Please enter a value into the Field "Last Name"
Error: Please enter a value into the Field "Address 1"
Error: Please enter a value into the Field "City"
Error: Please enter a value into the Field "Zip/Postal Code"
Error: Please enter a value into the Field "State/Province/Region"
Error: Please enter a value into the Field "Phone"


287d

  • Beginner
  • *
  • Posts: 45
Re: form validation methods different
« Reply #1 on: August 10, 2009, 04:45:32 am »
Some joy    ;D

I have figured out point A in my original query. In case anyone wants to know how to do it it's quite simple - no problems with my fix so far.

To make the validation on the "new shipping address form" beahve like the registration form (i.e. not to show the error message but turn input labels red):

-> in components/com_virtuemart/themes/[default]/templates/pages/account.shipto.tpl.php
Look for:
Code: [Select]
<input type="submit" class="button" name="submit" value="Save" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/web/index.php?page=checkout.index&amp;option=com_virtuemart&amp;Itemid=59" class="button">Back</a>

and add:

Code: [Select]
<input type="submit" class="button" name="submit" value="Save" [color=orange]onclick="return( submitregistration());"[/color] />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/web/index.php?page=checkout.index&amp;option=com_virtuemart&amp;Itemid=59" class="button">Back</a>


I got this from the source view by comparing both the reg form and new shipping address form and saw that they both load:
Code: [Select]
            <script language="javascript" type="text/javascript">//<![CDATA[
            function submitregistration() {
                var form = document.adminForm;
                var r = new RegExp("[\<|\>|\"|'|\%|\;|\(|\)|\&|\+|\-]", "i");
                var isvalid = true;
                var required_fields = new Array('address_type_name','first_name','last_name','address_1','city','zip','country','state','phone_1');
            for (var i=0; i < required_fields.length; i++) {
                    formelement = eval( 'form.' + required_fields[i] );
                   
                    if( !formelement ) {
                            formelement = document.getElementById( required_fields[i]+'_field0' );
                            var loopIds = true;
                    }
                    if( !formelement ) { continue; }
                    if (formelement.type == 'radio' || formelement.type == 'checkbox') {
                        if( loopIds ) {
                                var rOptions = new Array();
                                for(var j=0; j<30; j++ ) {
                                        rOptions[j] = document.getElementById( required_fields[i] + '_field' + j );
                                        if( !rOptions[j] ) { break; }
                                }
                        } else {
                                var rOptions = form[formelement.getAttribute('name')];
                        }
                        var rChecked = 0;
                        if(rOptions.length > 1) {
                                for (var r=0; r < rOptions.length; r++) {
                                        if( !rOptions[r] ) { continue; }
                                        if (rOptions[r].checked) {      rChecked=1; }
                                }
                        } else {
                                if (formelement.checked) {
                                        rChecked=1;
                                }
                        }
                        if(rChecked==0) {
                        document.getElementById(required_fields[i]+'_div').className += ' missing';
                            isvalid = false;
                    }
                    else if (document.getElementById(required_fields[i]+'_div').className == 'formLabel missing') {
                            document.getElementById(required_fields[i]+'_div').className = 'formLabel';
                        }                               
                    }
                    else if( formelement.options ) {
                        if(formelement.selectedIndex.value == '') {
                                document.getElementById(required_fields[i]+'_div').className += ' missing';
                                isvalid = false;
                        }
                        else if (document.getElementById(required_fields[i]+'_div').className == 'formLabel missing') {
                                document.getElementById(required_fields[i]+'_div').className = 'formLabel';
                        }
                    }
                    else {
                        if (formelement.value == '') {
                            document.getElementById(required_fields[i]+'_div').className += ' missing';
                            isvalid = false;
                        }
                        else if (document.getElementById(required_fields[i]+'_div').className == 'formLabel missing') {
                            document.getElementById(required_fields[i]+'_div').className = 'formLabel';
                    }
            }
            }
           
if( !isvalid) {
alert("Please make sure the form is complete and valid." );
}
return isvalid;
}
            //]]>
    </script>

But only the submit button in the reg form had the onclick on the submit button.





Anyone know how I can fix point B? I.e. in the registration form why does username and password labels not turn red on validation?

Thanks.

287d

  • Beginner
  • *
  • Posts: 45
Re: form validation methods different
« Reply #2 on: August 27, 2009, 05:20:09 am »
People. Nearly there. Just need advice on how to insert a css class into the code. Thanks in advance:



The whole form is loaded in:

Quote
administrator/components/com_virtuemart/classes/ps_userfield.php


Around lines 660-690 you can see that for required fields being incorrect the missing class is added.
Example:
Code: [Select]
if (formelement.value == '') {
                       document.getElementById(required_fields[i]+'$div_id_postfix').className += ' missing';

isvalid = false;


Which is set in
Quote
components/com_virtuemart/themes/[ThemeName]/theme.css

Code: [Select]
.missing {
color:red;
font-weight:bold;
}



All fine, but the username field has nothing to add the missing class. In
Quote
administrator/components/com_virtuemart/classes/ps_userfield.php:

line 721

Code: [Select]
if( isset( $required_fields['username'] )) {

echo '
   if ((r.exec(form.username.value) || form.username.value.length < 3)'.$optional_check.') {
   alert( "'. sprintf($VM_LANG->_('VALID_AZ09',false), $VM_LANG->_('USERNAME',false), 2) .'" );
   return false;
            }';
        }



Can anyone help me to edit that line to add the missing class as above if the username is empty (or rather <3).

Many Thanks.

287d

  • Beginner
  • *
  • Posts: 45
Re: form validation methods different
« Reply #3 on: September 02, 2009, 18:35:34 pm »
Anyone any ideas?