title: Validation of input field with icon send error message all together
body: <p>why all error message come together , i don't understand .
  <a href="https://i.stack.imgur.com/cRpjY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cRpjY.png" alt="enter image description here"></a></p>
  
  <p>i need like this ..
  <a href="https://i.stack.imgur.com/ng3xV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ng3xV.png" alt="enter image description here"></a></p>
  
  <p>ok , i can do this . here is my demo code .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $('#contact-form').validate({
      rules: {
          fullname: {
              minlength: 4,
              required: true
          },
          username: {
              required: true,
              email: true
          },
          password: {
              minlength: 6,
              required: true
          },
          confirm_password: {
              minlength: 6,
              required: true,
              equalTo: "#password"
          },
          mobile: {
              minlength: 11,
              maxlength: 11,
              required: true,
              number: true
          },
          conditions: {
              required: true
          }
      },
      highlight: function (element) {
          var id_attr = "#" + $(element).attr("id") + "1";
          $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
      },
      unhighlight: function (element) {
          var id_attr = "#" + $(element).attr("id") + "1";
          $(element).closest('.control-group').removeClass('has-error').addClass('has-success');
      },
  
      errorPlacement: function (error, element) {
          error.insertAfter(element.parent());
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> label.error {
              float: right!important;
          }
          
          .controls .error {
              color: red!important;
          }
          
          .controls .valid {
              color: green!important;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;AGD Tracking&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- for checking validation --&gt;
  
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="col-md-3"&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;
  
  
              &lt;form method="POST" class="form-horizontal" id="contact-form"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" id="fullname inputSuccess2" name="fullname" class="form-control" placeholder="Your name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;br&gt;
                  &lt;br&gt;
  
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="password" name="password" id="password" class="form-control" placeholder="Your password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-phone" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                   &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                         &lt;button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-success btn-block" title="Submit"&gt; Submit &lt;/button&gt;
                          &lt;br&gt;
                          &lt;input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" name="terms-and-conditions"&gt; I agree to the &lt;a href="#"&gt;terms and conditions&lt;/a&gt;
                          &lt;p class="help-block" style="display:none;"&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                 
  
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;&lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But my problem is , when i add a submit button and and want that my full form validate then submit button will be enable otherwise from first it should be disable . 
  i can also do that by this way :</p>
  
  <pre><code>$('#contact-form').on('keyup blur', function () {
      if ($('#contact-form').valid()) {
          if ($('#terms-and-conditions').click()) {
              $('button#emailSubmit').prop('disabled', false);
          } else {
              $('button#emailSubmit').prop('disabled', 'disabled');
          }
      }
  });
  </code></pre>
  
  <p>but problem is after adding this , all error message come together . see :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      $('#contact-form').validate({
      rules: {
          fullname: {
              minlength: 4,
              required: true
          },
          username: {
              required: true,
              email: true
          },
          password: {
              minlength: 6,
              required: true
          },
          confirm_password: {
              minlength: 6,
              required: true,
              equalTo: "#password"
          },
          mobile: {
              minlength: 11,
              maxlength: 11,
              required: true,
              number: true
          },
          conditions: {
              required: true
          }
      },
      highlight: function (element) {
          var id_attr = "#" + $(element).attr("id") + "1";
          $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
      },
      unhighlight: function (element) {
          var id_attr = "#" + $(element).attr("id") + "1";
          $(element).closest('.control-group').removeClass('has-error').addClass('has-success');
      },
  
      errorPlacement: function (error, element) {
          error.insertAfter(element.parent());
      }
  });
  
  $('#contact-form').on('keyup blur', function () {
      if ($('#contact-form').valid()) {
          if ($('#terms-and-conditions').click()) {
              $('button#emailSubmit').prop('disabled', false);
          } else {
              $('button#emailSubmit').prop('disabled', 'disabled');
          }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   label.error {
              float: right!important;
          }
          
          .controls .error {
              color: red!important;
          }
          
          .controls .valid {
              color: green!important;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- for checking validation --&gt;
  
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
  
              &lt;form method="POST" class="form-horizontal" id="contact-form"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" id="fullname inputSuccess2" name="fullname" class="form-control" placeholder="Your name"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;br&gt;
                  &lt;br&gt;
  
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="password" name="password" id="password" class="form-control" placeholder="Your password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-lock" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;span class="input-group-addon" id="sizing-addon1"&gt; &lt;span class="glyphicon glyphicon-phone" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                              &lt;input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                   &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                         &lt;button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-success btn-block" title="Submit"&gt; Submit &lt;/button&gt;
                          &lt;br&gt;
                          &lt;input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" name="terms-and-conditions"&gt; I agree to the &lt;a href="#"&gt;terms and conditions&lt;/a&gt;
                          &lt;p class="help-block" style="display:none;"&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                 
  
              &lt;/form&gt;
  
  
      </code></pre>
  </div>
  </div>
  </p>