如何使用HTML5 + CSS3驗證驗證ZK文本框？

Question

我使用ZK7，HTML5，CSS3，我試圖驗證以下ZK textbox元素，如果它是一個有效的電子郵件：

<form id="validation-form"> 
    <fieldset> 
     <div class="form-group"> 
      <label class="block clearfix" for="email"> 
       <span class="block input-icon input-icon-right"> 
        <z:textbox id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/> 
        <i class="icon-envelope"></i> 
       </span> 
      </label> 
     </div> 
     <div class="clearfix"> 
      <button id="forgotPassword" type="button" class="width-35 pull-right btn btn-sm btn-danger"> 
       <i class="icon-lightbulb"></i> 
       ${labels.send} 
      </button> 
     </div> 
    </fieldset> 
</form> 

下面是腳本：

<script type="text/javascript"> 
    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 > 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'); 
    }) 
</script> 

這是工作時，我改變z：文本框到html輸入爲：

<input id="emailInput" type="email" class="form-control" placeholder="${labels.login.email}"/> 

我應該如何使用zk文本框？

Answer 1

我不是100％確定如果這是你想要的，導致你的問題有很多的JavaScript，jQuery和第一個代碼看起來不像zk（只有你的國際化是熟悉的）。 如果你使用ZK，你可以做到以下幾點：

<textbox value="@bind(vm.email)" id="email" 
    constraint="/.+@(.+\.[a-z]+|)/: Please enter a valid e-mail address" 
    type="email" placeholder="enter email" /> 

我沒有把simpel電子郵件約束在那裏，但你可以約束改爲你想要什麼。
希望這可以幫助你。

Answer 2

這個很好的example集成了jQuery的面具和zk。
對於客戶端驗證，這應該沒問題。
此外，ZK提供form validation以及constraints for InputElements