HTML5 + CSS3 유효성 검사를 사용하여 ZK Textbox의 유효성을 검사하는 방법은 무엇입니까?

Question

나는 그것이 유효한 이메일 인 경우 ZK7, HTML5, CSS3 내가 ZK 텍스트 상자 요소 아래의 유효성을 검사하기 위해 노력하고있어 사용하고

:

<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> 

그것은이다 : 여기

<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> 

는 스크립트입니다 작업을 변경할 때 z : 텍스트 입력란을 html로 입력 :

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

zk 텍스트 상자를 사용하여 어떻게해야합니까?

Answer 1

저는 이것이 당신이 원했던 것이라면 100 % 확신 할 수 없습니다. 질문에 자바 스크립트, jquery가 많으며 첫 번째 코드가 실제로 zk처럼 보이지 않습니다 (귀하의 국제화 만 익숙 함). 당신은 다음과 같은 작업을 수행 할 수 ZK를 사용하는 경우 : 내가 거기 simpel 이메일 제약을 넣어 않았다

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

,하지만 당신은 당신이 원하는에 제약 조건을 변경할 수 있습니다.
희망이 도움이됩니다.

Answer 2

zk로 jquery 마스크를 통합 한이 멋진 example이 있습니다.
클라이언트 측 유효성 검사를 위해 이것은 잘되어야합니다. 또한
는 ZK는 constraints for InputElements