JQuery - Xác nhận Mẫu - Onblur

Question

Ok Tôi có một biểu mẫu có xác thực jquery hoạt động nhưng tôi muốn thực hiện thêm một bước nữa. Nó xác nhận bằng cách sử dụng một plug in nhưng chỉ khi gửi. Tôi tự hỏi nếu có một cách để làm cho nó để xác nhận trên blur vì vậy một người không phải chờ đợi cho đến khi họ nhấn gửi để biết nếu họ có một lỗi.

tôi đã tải plugin này:

http://docs.jquery.com/Plugins/Validation

tôi bao gồm các js cắm vào tập tin ở phía trên cùng của trang và dưới mà tôi có js:

<script> 
    $(document).ready(function(){ 
    $("#formid").validate(); 
    }); 
    </script> 

Các xác nhận hoạt động tốt khi tôi gửi biểu mẫu. Tôi chỉ tự hỏi những gì tôi cần phải thêm vào điều này để cho nó để xác nhận mỗi lĩnh vực trên blur.

Nếu bạn cần phải xem js file bạn có thể nhìn vào nó hoặc tải về tại đây

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Cũng tại liên kết phía dưới cùng của trang có một loạt các ý kiến. Một số trong những ý kiến ​​tham khảo thiết lập blur tôi chỉ không hiểu làm thế nào để làm điều đó. Cảm ơn bạn đã giúp đỡ.

Answer 1

<script> 
    $(document).ready(function(){ 
    $("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); }); 
    }); 
</script> 

Answer 2

Bạn có thể sử dụng phương thức 'biểu mẫu' của trình xác thực, xem documentation.

này gây nên hình thức xác nhận:

$('#formid').validate().form(); 

Nếu bạn muốn nó trên mờ bạn có thể sử dụng này:

$('#formid :input').blur(function() { 
    $('#formid').validate().form(); 
}); 

Answer 3

Bạn nên thiết lập onfocusout option true (cuộn xuống để xem nó)

$("#formid").validate({ 
    rules: { 
     // simple rule, converted to {required:true} 
     required: "required", 
    }, 
    onfocusout: true 
}); 

Answer 4

Cách tốt nhất tôi có thể thấy là sử dụng $.validate.element(selector) trong sự kiện mờ cho eac yếu tố h bạn muốn hành vi này cho:

var v = $('#formid').validate(); 

Sau đó, các sự kiện thiết lập mờ:

$('#firstName').blur(function(){ 
    v.element('#firstName'); 
}); 

Nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/ryleyb/brUVZ/

Answer 5

Phiên bản hiện tại của các plugin có chức năng gọi là 'validateOnBlur 'sẽ làm những gì bạn đang hỏi.

Mã của bạn sẽ giống như thế này nếu bạn đã áp dụng id của #formid vào biểu mẫu.

<script> 
    $('#formid').validateOnBlur(); 
</script> 

Đối với một số tài liệu rắn trên đầu này đến trang github của mình - https://github.com/victorjonsson/jQuery-Form-Validator

Answer 6

tôi biết đã quá muộn nhưng tôi vẫn muốn thêm vào này. cách Rất dễ dàng để thiết lập xác nhận cho nộp và làm mờ sự kiện là:

$("#MainForm").validate({ 
      onfocusout: function (element) {      
       if ($(element).valid()) 
       { 
        $(element).removeClass('input-error').addClass('input-valid'); 
       } 
      },     

      invalidHandler: function (event, validator) { 
       $.each(validator.errorList, function (index, error) { 
        $(error.element).addClass('input-error'); 
       }); 
      }, 

      showErrors: function() { 
       //This function is kept blank so as to hide the default validation messages. 
      } 
     }); 

CSS

.input-error { 
    border-color: #FF1919; 
    box-shadow: 0px 0px 10px #FF1919; 
} 
.input-valid { 
    border-color:#009500; 
    box-shadow: 0px 0px 10px #009500; 
} 

Hãy thử.