2013-08-28 25 views
7

Tôi có một hình thức với các thiết lập xác nhận sau:Cố gắng thiết lập thông báo validation tùy chỉnh với jQuery từ xa

$('#form').validate({ 
      onfocusout: false, 
      onkeyup: false, 
      onclick: false, 
      success: function(){ 
       $('#username').addClass('input-validation-confirmation'); 
      } 
     }); 
$('#username').rules("add", { 
     onfocusout: false, 
     onkeyup: false, 
     required: true, 
     email: true,      
     remote: { 
      url: function, 
      type: 'GET', 
      dataType: 'json', 
      traditional: true, 
      data: { 
       username: function() { 
        return $('#username').val(); 
       } 
      }, 
      dataFilter: function (responseString) { 
       var response = jQuery.parseJSON(responseString); 
       currentMessage = response.Message; 
       if (response.State == 0) { 
        currentMessage = currentMessage + 0; 
           return false; 
       } 
       return 'true'; 
      }, 
      beforeSend: function (response) { 
       showLoadingIndicator($('#username')); 
      }, 
      complete: function() { 
       hideLoadingIndicator($('#username')); 
      } 
     } 
}); 

Điều này đang cố gắng làm là sử dụng các yếu tố xác nhận tương tự (theo thứ tự để làm việc với một số khác khuôn khổ) để hiển thị cả lỗi và phương pháp thành công.

Vấn đề của tôi là phương pháp thành công của quy tắc của tôi bị kích hoạt TRƯỚC KHI xác thực từ xa đã hoàn tất. Tôi đã cố gắng thiết lập thông báo một số cách nhưng thông số tin nhắn tùy chỉnh dường như không được gọi là thành công xác thực.

Có ai biết các phương pháp khác sử dụng trường lỗi xác thực cho cả thông báo thành công và thông báo lỗi khi sử dụng kết hợp cả quy tắc xác thực mẫu và từ xa?

Edit:

bây giờ tôi hiểu rằng tôi đã mong đợi một sự kiện thành công không đúng lúc. Tôi cần một sự kiện được kích hoạt khi quá trình xác nhận đã hoàn tất (không được gửi). Có sự kiện như vậy không?

+0

Tôi giả sử bạn đang sử dụng http://jqueryvalidation.org/?Nếu có, có vẻ như [phương thức từ xa] (http://jqueryvalidation.org/remote-method) nằm trên cơ sở từng trường, và phải là con của trường sẽ kích hoạt kiểm tra từ xa. . . – ernie

Trả lời

5

Mã của bạn ...

$('#username').rules("add", { 
    onfocusout: false, 
    onkeyup: false, 
    required: true, 
    email: true,      
    remote: { ... }, 
    messages: { ... }, 
    success: function (label) { ... } 
}); 

Vấn đề ở đây là onfocusout, onkeyupsuccess không phải là "quy tắc". Chỉ có "quy tắc" cá nhân và tùy chọn messages có thể được đặt bên trong phương thức .rules('add').

$('#username').rules("add", { 
    required: true, 
    email: true,      
    remote: { ... }, 
    messages: { 
     remote: "custom remote message" 
    } 
}); 

tài liệu Xem cho .rules() phương pháp: http://jqueryvalidation.org/rules

onfocusout, onkeyupsuccess là "lựa chọn" mà chỉ đi vào bên trong của phương pháp .validate(), mà chỉ gắn liền với các yếu tố <form>.

Theo như thông báo "tùy chỉnh" cho remote: As per the docs, thông báo lỗi này sẽ tự động là thư được trả về từ máy chủ của bạn ... không có thiết lập đặc biệt.


EDIT theo ý kiến ​​và OP Cập nhật:

Mã của bạn:

$('#form').validate({ 
     onfocusout: false, 
     onkeyup: false, 
     onclick: false, 
     success: function(){ 
      $('#username').addClass('input-validation-confirmation'); 
     } 
}); 

Bạn nói, "Tuy nhiên, với mã cập nhật (xem ở trên) Tôi chưa bao giờ nhìn thấy sự thành công biến cố."

Bạn đã tắt tất cả các sự kiện trên biểu mẫu này. Sự kiện duy nhất còn lại để kích hoạt xác thực trên trường này là khi nhấn nút gửi. Chính xác khi bạn có muốn "thấy" success kích hoạt không?

DEMO: http://jsfiddle.net/xMhvT/

Nói cách khác, submit là sự kiện duy nhất còn lại để kích hoạt một thử nghiệm xác nhận khi bạn đã vô hiệu hóa tất cả các sự kiện khác.


EDIT dựa trên một bản cập nhật OP:.

"bây giờ tôi hiểu rằng tôi đã mong đợi một sự kiện thành công không đúng lúc tôi cần một sự kiện mà là bắn một lần xác nhận đã hoàn thành (không phải đã gửi). Có sự kiện như vậy không? "

success không phải là "sự kiện". Một "sự kiện" là một click, blur, keyup, vv (onkeyup, onfocusoutonclick những lựa chọn điều khiển các sự kiện cho plugin này)

success là một "chức năng gọi lại". "Hàm gọi lại" là điều xảy ra khi sự kiện.

• Nếu bạn cần "hàm gọi lại" để kích hoạt mỗi lần trường vượt qua xác thực, thì bạn có thể sử dụng success.

• Nếu bạn cần "hàm gọi lại" kích hoạt khi biểu mẫu vượt qua xác thực, thì bạn có thể sử dụng submitHandler. Tuy nhiên, đây cũng là khi biểu mẫu được gửi.

• Nếu bạn muốn "kiểm tra" toàn bộ biểu mẫu hoặc một trường đơn lẻ để xem nó có hợp lệ không khi gửi biểu mẫu, bạn có thể sử dụng phương thức ".valid()".

$('#username').valid(); // for one field 

// or 

$('#form').valid(); // for the whole form 

// you can also... 

if ($('#form').valid()) { 
    //do something if form is valid 
} 

Phương pháp này sẽ kích hoạt kiểm tra (hiển thị thông báo) và trả về giá trị boolean.

DEMO: http://jsfiddle.net/xMhvT/1/

Xem: http://jqueryvalidation.org/valid/

+0

Vâng, đó là điều kỳ lạ nhất. Ban đầu tôi đã thiết lập thành công trên hàm validate() nhưng chưa bao giờ được gọi. Tôi đã chuyển nó sang cuộc gọi quy tắc vì tôi có thể. Đó là khi nó bắt đầu được gọi là ở tất cả. –

+0

@PaulSachs, Có lẽ bạn đã thực hiện một số lỗi khác trong '.validate()'. 'success' cũng là một phần của chức năng cốt lõi của plugin. Khi plugin đang hoạt động, 'thành công' sẽ vẫn được kích hoạt dù bạn đã khai báo hay chưa. Nếu không, tôi không biết làm thế nào để giúp bạn khác hơn để hiển thị đúng cách để sử dụng plugin này và phương pháp của nó. – Sparky

+0

@PaulSachs, đặt 'success' trong phương thức' rules() 'hoàn toàn phá vỡ plugin. Nó kích hoạt khi tải trang và khi các trường không hợp lệ: http://jsfiddle.net/9AfLa/ – Sparky

1

Tôi muộn để trả lời câu hỏi này, nhưng tôi nghĩ rằng nó có thể giúp đỡ người khác:

trong chương trình PHP chỉ cần thêm các

sau
if($rows_matched==1){ 
      echo (json_encode(false)); 
     } 
     else{ 
      echo (json_encode(true)); 
     } 

và trong mã js của bạn, hãy viết theo dõi: $ (function() {

$('#product_add').validate({ 
rules:{ 
    product_sku:{ 
    remote:{ 
     url:'check.php', 
     type:'POST' 
    } 
    } 
}, 
messages:{ 
    product_sku:{ 
    remote:'already in database' 
    } 
} 
}); 

});

4

Sử dụng các thông số remote, dataFiltermessages như thế này:

var message = 'Default error message'; 

$('form').validate({ 
    rules: { 
     element1: { 
      remote: { 
       url: '/check', 
       type: 'post', 
       cache: false, 
       dataType: 'json', 
       data: { 
        element2: function() { 
         return $('.element2').val(); 
        } 
       }, 
       dataFilter: function(response) { 
        response = $.parseJSON(response); 

        if (response.status === 'success') return true; 
        else { 
         message = response.error.message; 
         return false; 
        } 
       } 
      } 
     } 
    }, 
    messages: { 
     element1: { 
      remote: function(){ return message; } 
     } 
    } 
}); 
Các vấn đề liên quan