Remove Validation for Reset button
<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>