title: JqGrid Form Edit Validate all fields on Submit and Show error on each invalid field
body: <p>I am using jqGrid form Edit with templating from the link in
  <a href="http://www.guriddo.net/demo/guriddojs/edit_add_delete/edit_template/index.html" rel="nofollow"> Here </a></p>
  
  <p>I have updated the template to look like below sothat I show invalid error below each field if any error.</p>
  
  <pre><code>            template = "&lt;div style='margin-left:15px;'&gt;&lt;div&gt; Customer ID &lt;sup&gt;*&lt;/sup&gt;:&lt;/div&gt;&lt;div&gt; {CustomerID} &lt;/div&gt;";
              template += "&lt;div&gt; Company Name: &lt;/div&gt;&lt;div&gt;{CompanyName} &lt;/div&gt;";
              template += "&lt;div&gt; Phone: &lt;/div&gt;&lt;div&gt;{Phone} &lt;/div&gt;";
              template += "&lt;label for="Phone" class="error ui-state-error-text hidden"&gt;&lt;/label&gt;";
              template += "&lt;div&gt; Postal Code: &lt;/div&gt;&lt;div&gt;{PostalCode} &lt;/div&gt;";
              template += "&lt;label for="PostalCode" class="error ui-state-error-text hidden"&gt;&lt;/label&gt;";            
              template += "&lt;div&gt; City:&lt;/div&gt;&lt;div&gt; {City} &lt;/div&gt;";
              template += "&lt;label for="City" class="error ui-state-error-text hidden"&gt;&lt;/label&gt;";  
              template += "&lt;hr style='width:100%;'/&gt;";
              template += "&lt;div&gt; {sData} {cData}  &lt;/div&gt;&lt;/div&gt;";
  </code></pre>
  
  <p>Now I have added validation to some of my fields using 
  <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acommon_rules#editrules" rel="nofollow">jqgrid Edit Rules </a></p>
  
  <p>Lets say I have</p>
  
  <pre><code>editrules : { required: true} in Phone
  editrules : { integer: true} in PostalCode
  editrules: { custom: true, custom_func: myCustomCheck } in Country
  </code></pre>
  
  <p>Where my custom check is</p>
  
  <pre><code>  myCustomCheck = function (value, colname) {
          if (colname === "County") {
              var label = $("label[for='" + colname + "']");
  
              if (value.indexOf("foobar") &gt; -1) {
                  invalidDesc = true;
                  $("#FrmGrid_mygrid").find('#' + colname).addClass("ui-state-error");
  
                  label.html("Country cant be contain foobar");
                  label.removeClass('hidden');
                  return [false];
              }
              else
              {
                  label.addClass('hidden');
                  return [true];
              }
  
          }
          return [true];
      };
  </code></pre>
  
  <p>The issue with here is it marks one input at a time when I click submit and there is no way to show my custom error label, on those edit rules predefined by jqgrid(like the integer/required). It only shows the error at the top of the form.</p>
  
  <p>What I would want is when the user clicks submit I validate all the inputs and show the error message on all the invalid ones instead of showing one click submit then show another...etc</p>