<p>Found a solution. I just add or remove the html5 <code>required</code> tag on load via Javascript. This way the js who duplicates the form can do whatever it wants and the html remains untouched:</p>
<pre><code>// adds required tag to inputs on page load
  $(&quot;#shippingAddress-firstName&quot;).attr(&quot;required&quot;, &quot;&quot;);
  $(&quot;#shippingAddress-lastName&quot;).attr(&quot;required&quot;, &quot;&quot;);
  $(&quot;#shippingAddress-address1&quot;).attr(&quot;required&quot;, &quot;&quot;);
  $(&quot;#shippingAddress-zipCode&quot;).attr(&quot;required&quot;, &quot;&quot;);
  $(&quot;#shippingAddress-city&quot;).attr(&quot;required&quot;, &quot;&quot;);
  $(&quot;.js-address-country&quot;).attr(&quot;required&quot;, &quot;&quot;);

  // listens to billing address checkbox
  $(&quot;#billingAddressSameAsShipping&quot;).change(function () {
    if ($(this).is(&quot;:checked&quot;)) {
      //removes required attributes when checkbox is checked (billing address form invisible)
      $(&quot;#billingAddress-firstName&quot;).removeAttr(&quot;required&quot;);
      $(&quot;#billingAddress-lastName&quot;).removeAttr(&quot;required&quot;);
      $(&quot;#billingAddress-address1&quot;).removeAttr(&quot;required&quot;);
      $(&quot;#billingAddress-zipCode&quot;).removeAttr(&quot;required&quot;);
      $(&quot;#billingAddress-city&quot;).removeAttr(&quot;required&quot;);
      $(&quot;.js-address-country&quot;).removeAttr(&quot;required&quot;);
    } else {
      //adds required attribute when checkbox is unchecked (billing address form visible)
      $(&quot;#billingAddress-firstName&quot;).attr(&quot;required&quot;, &quot;&quot;);
      $(&quot;#billingAddress-lastName&quot;).attr(&quot;required&quot;, &quot;&quot;);
      $(&quot;#billingAddress-address1&quot;).attr(&quot;required&quot;, &quot;&quot;);
      $(&quot;#billingAddress-zipCode&quot;).attr(&quot;required&quot;, &quot;&quot;);
      $(&quot;#billingAddress-city&quot;).attr(&quot;required&quot;, &quot;&quot;);
      $(&quot;.js-address-country&quot;).attr(&quot;required&quot;, &quot;&quot;);
    }
  });
</code></pre>
<p>Aditionaly the required tag is added or removed based on the Billing address checkbox.</p>
<p>This can be written much better I'm sure.</p>

CC BY-SA 4.0
2021-04-20T11:28:47.540Z
2021-04-20T11:28:47.540Z
KSPR
<p>Would removing <code>required</code> via JS be an option?</p>

CC BY-SA 4.0
2021-04-08T09:29:43.993Z
2021-04-08T09:29:43.993Z
Matthias Redl-Mann
<p>Yes I know there is <a href="https://craftcms.stackexchange.com/questions/15897/craft-commerce-validation-on-address-fields">this post</a></p>
<p>But how do you do address validation in the frontend of Commerce 3?</p>
<p>The problem is the way Billing Address &amp; Shipping Address are set up.
Billing Address are the same form fields duplicated via js and it is next to impossible to differentiate the two.</p>
<p>If I add <code>required</code> to any field this will also apply to the hidden field in the billing address form. Therefore, the html5 validation will always fail.</p>
<p>Has anybody a solution to this?</p>

<validation><plugin-craftcommerce3><frontend-form>
Craft Commerce: Frontend Validation on Address Fields
# Craft Commerce: Frontend Validation on Address Fields

(Asked by: username_0 on 2021-04-06)

Yes I know there is [this post](https://craftcms.stackexchange.com/questions/15897/craft-commerce-validation-on-address-fields)

But how do you do address validation in the frontend of Commerce 3?

The problem is the way Billing Address & Shipping Address are set up.
Billing Address are the same form fields duplicated via js and it is next to impossible to differentiate the two.

If I add `required` to any field this will also apply to the hidden field in the billing address form. Therefore, the html5 validation will always fail.

Has anybody a solution to this?

**Tags:** validation, plugin-craftcommerce3, frontend-form

---

## 2 answers

### Answer by username_0 on 2021-04-20. Score: 1 | Accepted answer

Found a solution. I just add or remove the html5 required tag on load via Javascript. This way the js who duplicates the form can do whatever it wants and the html remains untouched:
// adds required tag to inputs on page load
  $("#shippingAddress-firstName").attr("required", "");
  $("#shippingAddress-lastName").attr("required", "");
  $("#shippingAddress-address1").attr("required", "");
  $("#shippingAddress-zipCode").attr("required", "");
  $("#shippingAddress-city").attr("required", "");
  $(".js-address-country").attr("required", "");

  // listens to billing address checkbox
  $("#billingAddressSameAsShipping").change(function () {
    if ($(this).is(":checked")) {
      //removes required attributes when checkbox is checked (billing address form invisible)
      $("#billingAddress-firstName").removeAttr("required");
      $("#billingAddress-lastName").removeAttr("required");
      $("#billingAddress-address1").removeAttr("required");
      $("#billingAddress-zipCode").removeAttr("required");
      $("#billingAddress-city").removeAttr("required");
      $(".js-address-country").removeAttr("required");
    } else {
      //adds required attribute when checkbox is unchecked (billing address form visible)
      $("#billingAddress-firstName").attr("required", "");
      $("#billingAddress-lastName").attr("required", "");
      $("#billingAddress-address1").attr("required", "");
      $("#billingAddress-zipCode").attr("required", "");
      $("#billingAddress-city").attr("required", "");
      $(".js-address-country").attr("required", "");
    }
  });

Aditionaly the required tag is added or removed based on the Billing address checkbox.
This can be written much better I'm sure.


---

### Answer by username_1 on 2021-04-08. Score: 2

Would removing `required` via JS be an option?


---

