title: Validate custom fields added above the “Add To Cart” in Single Product pages
body: <p>I have added the form above the Add To Cart button in single product page in WooCommerce and I want to validate the form, like without filling the form user should not be able to click the <code>Add To Cart</code> Button.</p>
  <p>My Code Added In <code>functions.php</code>:</p>
  <pre><code>function add_name_on_tshirt_field() {
      echo '&lt;div class=&quot;woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled&quot;&gt;&lt;table class=&quot;variations&quot; cellspacing=&quot;0&quot; width=&quot;100px&quot;&gt;
  
          &lt;tbody&gt;&lt;tr&gt;
            &lt;td class=&quot;label&quot; style=&quot;width:100px&quot;&gt;&lt;label for=&quot;color&quot;&gt;Agent Name&lt;/label&gt;&lt;/td&gt;
            &lt;td class=&quot;value&quot;&gt;
                &lt;input type=&quot;text&quot; name=&quot;name-on-tshirt&quot; value=&quot;&quot; required/&gt;                      
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td class=&quot;label&quot;&gt;&lt;label for=&quot;color&quot;&gt;Title&lt;/label&gt;&lt;/td&gt;
            &lt;td class=&quot;value&quot;&gt;
                &lt;input type=&quot;text&quot; name=&quot;name-on-tshirt&quot; value=&quot;&quot; required/&gt;                      
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td class=&quot;label&quot;&gt;&lt;label for=&quot;color&quot;&gt;Phone No&lt;/label&gt;&lt;/td&gt;
            &lt;td class=&quot;value&quot;&gt;
                &lt;input type=&quot;text&quot; name=&quot;name-on-tshirt&quot; value=&quot;&quot; required/&gt;                      
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;/br&gt;
   ';
  }
  add_action( 'woocommerce_before_add_to_cart_form', 'add_name_on_tshirt_field' );
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3sIov.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3sIov.jpg" alt="enter image description here" /></a></p>
  <p>Using the above code, the form has been added but how to validate the form before clicking on the Add To Cart button.</p>
  <p>Any help is much appreciated.</p>