Chosen.js và xác nhận jquery

Question

Tôi đang sử dụng validate.jquery.js: hoạt động tốt. Nhưng khi tôi thêm tệp được chọn.js, xác thực trên menu thả xuống chọn không hoạt động nữa.

Đây là JS Tôi đang sử dụng http://pastebin.com/S9AaxdEN

Và đây là hình thức chọn của tôi:

<select name="category" id="category" placeholder="" class="{validate:{required:true}}"> 
<option value=""><?php echo lang('category_choice'); ?></option> 
<option value="vtt">VTT</option> 
<option value="autre">Autre type de v&eacute;lo</option> 
</select> 

Không biết tại sao chosen.js vô hiệu hóa xác nhận, bất kỳ ý tưởng?

Answer 1

Bạn có thể khắc phục điều này bằng cách thêm các lớp "chzn-done" mà không mất tài sản "bỏ qua" để "validate.settings":

var settings = $.data($('#myform')[0], 'validator').settings; 
settings.ignore += ':not(.chzn-done)'; 

example

HTML:

<form method="post" id="form1" action=""> 
    <fieldset> 
     <legend>Login Form</legend> 
     <div> 
      <label>datos</label> 
      <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;"> 
       <option></option> 
       <option value="1">uno</option> 
       <option value="2">dos</option> 
      </select> 
     </div> 
     <div> 
      <label for="phone">Phone</label> 
      <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" /> 
     </div> 
     <div> 
      <label for="email">Email</label> 
      <input id="email" name="email" class="{required:true,email:true}"> 
     </div> 

     <div class="error"></div> 
     <div> 
      <input type="submit" value="enviar datos"/> 
     </div> 
    </fieldset> 
</form> 

JS:

$(function() { 

    var $form = $("#form1"); 

    $(".chzn-select").chosen({no_results_text: "No results matched"}); 
    $form.validate({ 
     errorLabelContainer: $("#form1 div.error"), 
     wrapper: 'div', 
    }); 

    var settings = $.data($form[0], 'validator').settings; 
    settings.ignore += ':not(.chzn-done)'; 

    $('form').each(function(i, el){ 

     var settings = $.data(this, 'validator').settings; 
     settings.ignore += ':not(.chzn-done)'; 

    }); 

}); 

Answer 2

Tôi chỉ muốn nói thêm rằng cho vị trí lỗi, nó sẽ nối các phần tử ngay bên cạnh ẩn, do đó bạn có thể muốn thay đổi vị trí bằng cách sử dụng đoạn mã sau vào chức năng validate của bạn như là một đối số tùy chọn

errorPlacement: function(error,element) { 
     if (element.is(":hidden")) { 
      //console.log(element.next().parent()); 
      element.next().parent().append(error); 
     } 
     else { 
      error.insertAfter(element); 
     } 

    } 

Answer 3

Điều này sẽ giải quyết không chỉ vấn đề không thể nhìn thấy xác thực nhưng nó cũng sẽ áp dụng tiêu chuẩn "đầu vào-xác nhận-lỗi" lớp để chọn.js theo kiểu.

Có hai trường hợp cần áp dụng cả khi biểu mẫu được gửi và thay đổi được chọn. Xem ba phần mã bên dưới.

1. Việc đầu tiên đặt xác thực biểu mẫu để xác thực các yếu tố ẩn.
2. Cách thứ hai kiểm tra xác thực đã chọn khi gửi.
3. Kiểm tra thứ ba xác thực đã chọn khi có thay đổi.

Sets lên xác nhận hình thức để hiển thị ẩn:

var validator = $("#FormID").data('validator'); 
validator.settings.ignore = ":hidden:not(select)"; 

Kiểm tra vào mẫu nộp:

$('#FormID').on('submit', function() { 
    var ChosenDropDowns = $('.chzn-done'); 
    ChosenDropDowns.each(function (index) { 
     var ID = $(this).attr("id"); 
     if (!$(this).valid()) 
     { 
      $("#" + ID + "_chzn a").addClass("input-validation-error"); 
     } 
     else 
     { 
      $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
     } 
    }); 
}); 

Kiểm tra trên một số thay đổi:

$(".chzn-select").chosen().change(function() { 
    var ID = $(this).attr("id"); 
    if (!$(this).valid()) { 
     $("#" + ID + "_chzn a").addClass("input-validation-error"); 
    } 
    else { 
     $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
    } 
}); 

Answer 4

Ngoài ra còn có vấn đề xác thực các menu chọn được chọn sau biểu mẫu đã được gửi. Nếu bạn có lỗi xác thực trên menu thì hãy thay đổi menu để hợp lệ lỗi xác thực sẽ không biến mất. Biểu mẫu vẫn có thể được gửi, nhưng không rõ ràng là có lỗi xác thực hiển thị.

Dưới đây là một ví dụ để khắc phục sự cố bằng cách sử dụng invalidHandler và valid().

// We'll use this flag so we don't have to validate fields before 
// the form has been submitted. 
var validatingForm = false; 

// This line before validate() is called allows 
// chosen menus to be validated 
$.validator.setDefaults({ ignore: ":hidden:not(select)" }); 

$("#yourForm").validate({ 
    invalidHandler: function() { 
     // Now we can validate the fields onChange 
     validateForm = true; 
    }, 
     rules: { 
      // Probably your validation rules here 
     } 
    }); 

// Now set an onChange event for the chosen menu 
$("yourChosenMenu").change(function(){ 

    // Check that we've tried to submit the form 
    if(validateForm) { 
     // We tried to submit the form, re-validate on change 
     $("yourChosenMenu").valid(); 
    } 
});