I'm trying to customize the form for customer account creation and I would like to use the same form for different types of customers, i.e. private and companies. What I want to achieve is using the same form for both and show different fields according to the choice of the user: if user choose 'private' he has to fill in some fields, if he chooses 'company', additional fields - for the address and VAT - are shown.
So i've enabled address fields in the local.xml and they're correctly shown or hidden, depending on which button (private or company) is chosen.
The problem is that if I simply hide the address fields, form is validated also on those fields, unless I put a
$this->setShowAddressFields(false);
just before the
if($this->getShowAddressFields()): ?
to hide address fields and suppress validation.
I've also put
<input type="hidden" name="create_address" value="0" /
>
to skip addresss fields validation.
So I've tried with jquery to change the setShowAddressFields whenever the user click the button to choose its type, something like
$('#choose-type button').click(function(){
if($(this).val() == 'private'){
$(this).addClass('selected');
$('#choose-type button').last().removeClass('selected');
$('.required-company').removeClass('visible');
<?php $addrEnabled = $this->setShowAddressFields(false) ?>
}else{
$(this).addClass('selected');
$('#choose-type button').first().removeClass('selected');
<?php $addrEnabled = $this->setShowAddressFields(true) ?>
$('.required-company').addClass('visible');
}
});
I've also tried to show two different forms, in the same template, one with $this->setShowAddressFields(false) and the other with $this->setShowAddressFields(true) and show/hide the right form, and validate with Varien the right form, like this
var dataForm = new VarienForm('form-validate', true);
var dataFormbis = new VarienForm('form-validate-bis', true);
but still no luck.
So it is possible to achieve something like this in the same template, or I have to forcedly create two different templates?
Dunno if it can be of help for someone, but I came up with my own solution (even though I don't really like it totally, and dunno if it is the correct way).
I finally succeeded with the last part of my question, thus creating 2 different forms and creating a validation for each of them.
The first form has the <?php $addrEnabled = $this->setShowAddressFields(false) ?>
, whereas the second has it set to true.
Forms have different ids to identify them, one has id='form-private'
and the other id='form-company'
.
Then in my script I have
validateRegistration('private','company');
$('#choose-type button').click(function(){
($(this).val() == 'private') ? validateRegistration($(this).val(), 'company') : validateRegistration($(this).val(), 'private');
});
function validateRegistration(userType,userTypeBis){
$("#form-"+userType + "").css('display', 'block');
$("#form-"+userTypeBis + "").css('display', 'none');
var dataForm = new VarienForm('form-'+userType+'', true);
$("#form-"+userType + "").submit(function(e){
if(//some custom condition to avoid validation in case some custom fields are not in the way i need ) {
e.preventDefault();
}
else {
dataForm.validator && dataForm.validator.validate();
}
});
}
</script>
Please note that the submit() is called inside the dataForm.validator.validate() if the validation is passed, so my custom conditions should not be needed (the if-else), I think the important thing is to have two different forms with two different validations.
Hope this helps