JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://www.vandijkzakelijk.nl/static/L96ZhHIpK0TVjiQe70g9H2vVxGlItQTUGQiQ8ln4fc3.js"></script>
<form id="myform">
    <ul>
        <li><input class="quantity" name="product1" />Product1</li>
        <li><input class="quantity" name="product2" />Product2</li>
        <li><input class="quantity" name="product3" />Product3</li>
        <li><input class="quantity" name="product4" />Product4</li>        
    </ul>
    <button type="submit">submit</button>
</form>

JavaScript

$("#myform").validate({
  groups: {
    username: "product1 product2 product3 product4"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "product1"  || 
         element.attr("name") == "product2" || 
         element.attr("name") == "product3" || 
         element.attr("name") == "product4" )
         error.insertAfter(".quantity:last");
     else
       error.insertAfter(element);
   },
   debug:true
 });