Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-20T11:28:47.540Z
Answers.LastActivityDate: 2021-04-20T11:28:47.540Z
Answers.UserDisplayName: KSPR
Answers.Body: <p>Would removing <code>required</code> via JS be an option?</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-08T09:29:43.993Z
Answers.LastActivityDate: 2021-04-08T09:29:43.993Z
Answers.UserDisplayName: Matthias Redl-Mann
Body: <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>
  
Tags: <validation><plugin-craftcommerce3><frontend-form>
Title: Craft Commerce: Frontend Validation on Address Fields
ThreadText: # 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?
  
  
  ---
  
  