title: Remove Validation for Reset button
body: <p>I have below form , once we select "Designer", than only it will display options to select "Order Number" &amp; once if select "Order Number" than only it will allow to select "Product" , where "Product" is multi-select box.</p>
  
  <p><a href="https://i.stack.imgur.com/J34Ry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J34Ry.png" alt="enter image description here"></a></p>
  
  <p>Assume i selected "Designer" &amp; "Order Number" , than <strong>when i click Reset button , its doing validation that its asking to fill "Product"</strong> values , its fine for submit buttton, but it should not do validation for "RESET" button.</p>
  
  <p>I am trying <a href="https://stackoverflow.com/questions/4748303/how-to-clear-all-selected-items-in-a-select-input-using-jquery">this</a> but still its not working....</p>
  
  <p>Here all option values are fetching dynamically from php code as below.</p>
  
  <p><a href="https://i.stack.imgur.com/OHdET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OHdET.png" alt="enter image description here"></a></p>
  
  <p>Product is multi-select box</p>
  
  <p><a href="https://i.stack.imgur.com/DUYxq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DUYxq.png" alt="enter image description here"></a></p>
  
  <p><strong>form</strong></p>
  
  <pre><code>&lt;form method="post" enctype='multipart/form-data' action="update_paidstatus.php" onsubmit="return validate();"&gt;
      &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt; Designer &lt;/td&gt;     
          &lt;td&gt;
            &lt;select onchange="getOrderDetail(event);" name="designer_id" id="designer_id"&gt;
              &lt;option value=""&gt;Select Designer&lt;/option&gt;
              &lt;?php while($data = $stmt-&gt;fetch())  { if($data['type']=="admin")continue;?&gt;
                &lt;option value="&lt;?php echo $data['userID'];?&gt;"&gt;&lt;?php echo $data['name'];?&gt;&lt;/option&gt;
              &lt;?php } ?&gt;
            &lt;/select&gt;  
          &lt;/td&gt; 
  
          &lt;td&gt;&lt;p id="error_para1" &gt;&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt; 
  
        &lt;tr&gt;
          &lt;td&gt;
             Order Number: 
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="ordernumbers"&gt;
            &lt;select name="designerorder_id" id="designerorder_id"&gt;
              &lt;option value=""&gt;Select Order&lt;/option&gt;
            &lt;/select&gt;
            &lt;/div&gt;
          &lt;/td&gt;
           &lt;td&gt;&lt;p id="error_para2" &gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt; 
        &lt;tr&gt;
          &lt;td&gt;
            Product 
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="productnumbers" name="dproduct_ids" id="dproduct_ids"&gt;
            &lt;select id="mySelect"&gt;
              &lt;option&gt;Select Products&lt;/option&gt;
            &lt;/select&gt;
  
          &lt;/div&gt;
         &lt;/td&gt;
          &lt;td&gt;&lt;p id="error_para3" &gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
      &lt;hr/&gt;
  
  &lt;input type="hidden" name="dproduct_id" id="dproduct_id" value=""/&gt; 
     &lt;input class="btn btn-large btn-primary" name="btn-signup" type="submit" id="btnSubmit" value="Submit" /&gt;
    &lt;button formnovalidate="formnovalidate" class="btn btn-large btn-primary"&gt;RESET&lt;/button&gt;
  
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>function validate()
  {
   // alert("d");
   var error="";
   var designer_id = document.getElementById( "designer_id" );
   if( designer_id.value == "" )
   {
    error = " Please Select Designer";
    document.getElementById( "error_para1" ).innerHTML = error;
    return false;
   }
   var error="";
   var dproduct_ids = document.getElementById( "dproduct_ids" );
  
   if( dproduct_ids.value == "" )
   {
    error = " Please Select Product";
    document.getElementById( "error_para3" ).innerHTML = error;
    return false;
   }
   var error="";
   var designerorder_id = document.getElementById( "designerorder_id" );
   if( designerorder_id.value == "" )
   {
    error = " Please Select Order";
    document.getElementById( "error_para2" ).innerHTML = error;
    return false;
   }
   var error="";
   var commission = document.getElementById( "commission" );
   alert(commission.value );
   if(commission.value == "" )
   {
    error = " Please add commission";
    document.getElementById( "error_para5" ).innerHTML = error;
    return false;
   }
   var error="";
   var Duedate = document.getElementById( "Duedate" );
   if(Duedate.value == "" )
   {
    error = " Please Select Designer";
    document.getElementById( "error_para6" ).innerHTML = error;
    return false;
   }
    else
   {
    return true;
   }
  }
  
  
  $(document).ready(
  
    /* This is the function that will get executed after the DOM is fully loaded */
    function () {
      $( "#datepicker" ).datepicker({
        changeMonth: true,//this option for allowing user to select month
        changeYear: true //this option for allowing user to select from year range
      });
    }
  
  );
    function getOrderDetail(e)
    {
      var designerId=e.target.options[e.target.selectedIndex].value;    
      var url="http://sbdev2.kidsdial.com:81/php/site6/designerpaidstatus.php?designer_id="+designerId+"&amp;opration=2";
         var request = jQuery.ajax( {
                  url: url ,
                  type: 'POST',                      
              } );
  
              request.done( function (result)
              {  
                document.getElementById('ordernumbers').innerHTML =result;
  
              } );
              request.fail( function ( error )
              {
                  console.dir(error);             
              } );
       }
    function getProductDetail(e)
    {    
      var productId = $("#dproductselect option:selected").attr("class");  
      var finalstrig=productId.split(",");
  
      var select='';
      select+='&lt;select class="test" multiple="multiple" name="dproduct_ids" id="dproduct_ids"&gt;';
  
      for(i=0;i&lt;finalstrig.length;i++)
      {
        if(finalstrig[i]!=0)
        {
          select +='&lt;option value="'+finalstrig[i]+'"&gt;'+finalstrig[i]+'&lt;/option&gt;';
        }
      }
      select +='&lt;/select&gt;';   
      document.getElementById('productnumbers').innerHTML =select;
      (function($) {
      $(function() {
          $('.test').fSelect();
      });
  })(jQuery);
  
    }
       &lt;!-- reset --&gt;
  $("button").click(function() {
      $("#mySelect").val([]);
  });
  </code></pre>
  
  <p>Note : I tried lot before posting here, also i am new to this programming world.... please help me....</p>