0

Is it possible to validate only either shipping or billing specfic field by javascript.

eg.if billing has email field filled so it should be remove required from shipping and let it go for place order.

Screencast

I have tried below code and work but it seems very dirty and long way.

<script type="text/javascript">
/* For custom validate extra email and telephone */
document.observe("dom:loaded", function() {
  var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '')  {
        $('billing:extra_email').addClassName('required-entry');
    }else{
        $('billing:extra_email').removeClassName('required-entry');
    }
});
$('billing-address-select').observe('change', function(event) {
   var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '')  {
        $('billing:extra_email').addClassName('required-entry');
    }else{
        $('billing:extra_email').removeClassName('required-entry');
    }
});
$('billing:extra_email').observe('change', function(event) {
   var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '')  {
        $('billing:extra_email').addClassName('required-entry');
    }else{
        $('billing:extra_email').removeClassName('required-entry');
        $('advice-required-entry-billing:extra_email').hide();

    }
});
document.observe("dom:loaded", function() {
var isShippingEnable = $('shipping:different_shipping').getValue();
  var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '' && $('shipping:extra_email').getValue() == '')  {
        $('shipping:extra_email').addClassName('required-entry');
    }else{
        $('shipping:extra_email').removeClassName('required-entry');
    }
});
$('shipping-address-select').observe('change', function(event) {
    var isShippingEnable = $('shipping:different_shipping').getValue();
   var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '' && $('shipping:extra_email').getValue() == '')  {
        $('shipping:extra_email').addClassName('required-entry');
    }else{
        $('shipping:extra_email').removeClassName('required-entry');
    }
});
$('shipping:extra_email').observe('change', function(event) {
    var isShippingEnable = $('shipping:different_shipping').getValue();
   var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:extra_email').getValue() == '' && $('shipping:extra_email').getValue() == '')  {
        $('shipping:extra_email').addClassName('required-entry');
    }else{
        $('shipping:extra_email').removeClassName('required-entry');
        $('advice-required-entry-shipping:extra_email').hide();

    }
});

document.observe("dom:loaded", function() {
  var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:telephone').getValue() == '')  {
        $('billing:telephone').addClassName('required-entry');
    }else{
        $('billing:telephone').removeClassName('required-entry');
    }
});
$('billing-address-select').observe('change', function(event) {
   var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:telephone').getValue() == '')  {
        $('billing:telephone').addClassName('required-entry');
    }else{
        $('billing:telephone').removeClassName('required-entry');
    }
});
$('billing:telephone').observe('change', function(event) {
   var billingselectElement = $('billing-address-select');
    if (billingselectElement.getValue() == '' && $('billing:telephone').getValue() == '')  {
        $('billing:telephone').addClassName('required-entry');
    }else{
        $('billing:telephone').removeClassName('required-entry');
        $('advice-required-entry-billing:telephone').hide();

    }
});
document.observe("dom:loaded", function() {
var isShippingEnable = $('shipping:different_shipping').getValue();
  var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:telephone').getValue() == '' && $('shipping:telephone').getValue() == '')  {
        $('shipping:telephone').addClassName('required-entry');
    }else{
        $('shipping:telephone').removeClassName('required-entry');
    }
});
$('shipping-address-select').observe('change', function(event) {
    var isShippingEnable = $('shipping:different_shipping').getValue();
   var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:telephone').getValue() == '' && $('shipping:telephone').getValue() == '')  {
        $('shipping:telephone').addClassName('required-entry');
    }else{
        $('shipping:telephone').removeClassName('required-entry');
    }
});
$('shipping:telephone').observe('change', function(event) {
    var isShippingEnable = $('shipping:different_shipping').getValue();
   var shippingselectElement = $('shipping-address-select');
    if (isShippingEnable && shippingselectElement.getValue() == '' && $('billing:telephone').getValue() == '' && $('shipping:telephone').getValue() == '')  {
        $('shipping:telephone').addClassName('required-entry');
    }else{
        $('shipping:telephone').removeClassName('required-entry');
        $('advice-required-entry-shipping:telephone').hide();

    }
});
/* End validation */

0

you can use Jquery instead simple JS mark first element required (no need if by default) and just depend second one on first: I had created fiddler for your understandings same as your requirements:

Dependent Required

  • magento form validation is already doing its work.can't we do it using magento native form validation? – Zaheerabbas Oct 23 '18 at 7:00
  • No magento by default is not doing like that. Jquery definitely added in your project you just need to add little code for this. Let me know if you have any issue in it ? – Hassan Ali Shahzad Oct 23 '18 at 7:02
  • id is like billing:extra_email can't accept this in jquery – Zaheerabbas Oct 23 '18 at 7:07
  • No need billing:extra_email to accept this. you just have to replace two field ids. – Hassan Ali Shahzad Oct 23 '18 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.