title: How to validate ZK Textbox by using HTML5+CSS3 validation?
body: <p>I'm using ZK7, HTML5, CSS3 and I'm trying to validate below zk textbox element if it is a valid email:</p>
  
  <pre><code>&lt;form id="validation-form"&gt;
      &lt;fieldset&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="block clearfix" for="email"&gt;
                  &lt;span class="block input-icon input-icon-right"&gt;
                      &lt;z:textbox id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/&gt;
                      &lt;i class="icon-envelope"&gt;&lt;/i&gt;
                  &lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="clearfix"&gt;
              &lt;button id="forgotPassword" type="button" class="width-35 pull-right btn btn-sm btn-danger"&gt;
                  &lt;i class="icon-lightbulb"&gt;&lt;/i&gt;
                  ${labels.send}
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(function($) {
  
          $('[data-rel=tooltip]').tooltip();
  
          $(".select2").css('width','200px').select2({allowClear:true})
          .on('change', function(){
              $(this).closest('form').validate().element($(this));
          }); 
  
  
          var $validation = false;
  
          //documentation : http://docs.jquery.com/Plugins/Validation/validate
  
          $('#validation-form').validate({
  
              errorElement: 'div',
              errorClass: 'help-block',
              focusInvalid: false,
              rules: {
                  email: {
                      required: true,
                      email:true
                  }
              },
  
              messages: {
                  email: {
                      required: "Please provide a valid email.",
                      email: "Please provide a valid email."
                  }
              },
  
              invalidHandler: function (event, validator) { //display error alert on form submit   
                  $('.alert-danger', $('.login-form')).show();
              },
  
              highlight: function (e) {
                  $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
              },
  
              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                  $(e).remove();
              },
  
              errorPlacement: function (error, element) {
                  if(element.is(':checkbox') || element.is(':radio')) {
                      var controls = element.closest('div[class*="col-"]');
                      if(controls.find(':checkbox,:radio').length &gt; 1) controls.append(error);
                      else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                  }
                  else if(element.is('.select2')) {
                      error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                  }
                  else if(element.is('.chosen-select')) {
                      error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                  }
                  else error.insertAfter(element.parent());
              },
  
              submitHandler: function (form) {
              },
              invalidHandler: function (form) {
              }
          });
  
  
  
  
          $('#modal-wizard .modal-header').ace_wizard();
          $('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>It is working when I change z:textbox to html input as:</p>
  
  <pre><code>&lt;input id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/&gt;
  </code></pre>
  
  <p>How should I do the same by using zk textbox?</p>