香菜字段驗證事件偵聽器

Question

目前，我正在嘗試Parsley.js，它的工作原理相當不錯的，如果你問我，不過，我有幾個問題：

1. 我要聽爲了什麼事件追加輸入的父母一旦input得到類parsley-success或parsley-error類嗎？如果沒有validate()，field:success和field-errorevents不會被解僱。

我嘗試這樣做，例如：

$('.form-control').on('field:success', function() { 
    if ($(this).parent().find('i').length) { //remove favicon if one's present 
     $(this).parent().find('i').remove(); 
    } 
    $(this).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>'); 
}); 

但沒有任何反應，當input GET分配的錯誤類

林與忍者形式的工作我的WordPress的安裝，你會如何assign the attributes輸入？在NF的後端，這是不可能的。目前我在頁面加載後使用Javascript添加它們，但我不知道這是否是最好的方法。

Answer 1

所以看來我缺乏Javascript是因爲這個問題而殺了我。經過大量的嘗試和調試，我完全按照自己的方式工作。 而不是用$('.form-control')聽，我需要window.Parsley聽。所以我的功能是現在的情況如下：

//field success 
window.Parsley.on('field:success', function() { 
    var field = this.$element[0].id; 
    // This global callback will be called for any field that fails validation. 
    console.log('Validation succeeded for: ', field); 
    $('#' + field).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>'); 
}); 

這個完美的作品，並添加字形當現場被成功驗證。

不要忘記將屬性添加到字段本身，否則它不知道要驗證什麼。 我用javascript添加屬性。在NinjaForms後端我添加一個類到input（我不能從那裏添加屬性）。從那以後，我使用這個類的選擇和添加屬性，很容易：

var textonly = $('input.ninja-forms-field.text-only-input');//the class is 'text-only-input' 
if(textonly.length) { 
    textonly.attr('data-parsley-trigger','focusout'); 
    textonly.attr('data-parsley-trigger-after-failure','keyup'); 
    textonly.attr('data-parsley-pattern', '^[a-z A-Z]+$'); 
    textonly.attr('data-parsley-pattern-message', 'Dit veld mag alleen maar letters en spaties bevatten. Minimaal 2 letters'); 
    textonly.attr('minlength','2'); 
} 

你可以找到我的例子在以下網址：

http://boriskamp.nl/contact/

http://boriskamp.nl/webdesign/

這裏是我的完成代碼以使其起作用：

//make jQuery reference to $ 

jQuery（document）.ready（function（$）{ 'use strict';

// change input types: 

var checkbox = $('#ninja_forms_field_15_options_span input.ninja-forms-field.checkbox-input'); 
if(checkbox.length) { 
    checkbox.attr('data-parsley-trigger','click'); 
    checkbox.attr('data-parsley-trigger-after-failure','click'); 
    checkbox.attr('data-parsley-multiple','betreft'); 
    checkbox.attr('data-parsley-mincheck','1'); 
} 
var textonly = $('input.ninja-forms-field.text-only-input'); 
if(textonly.length) { 
    textonly.attr('data-parsley-trigger','focusout'); 
    textonly.attr('data-parsley-trigger-after-failure','keyup'); 
    textonly.attr('data-parsley-pattern', '^[a-z A-Z]+$'); 
    textonly.attr('data-parsley-pattern-message', 'Dit veld mag alleen maar letters en spaties bevatten. Minimaal 2 letters'); 
    textonly.attr('minlength','2'); 
} 
var email = $('input.ninja-forms-field.email-input'); 
if(email.length) { 
    email.get(0).type = 'email'; 
    email.attr('required',''); 
    email.attr('data-parsley-trigger','focusout'); 
    email.attr('data-parsley-trigger-after-failure','keyup'); 
} 
var tel = $('input.ninja-forms-field.telefoon-input'); 
if(tel.length) { 
    tel.get(0).type = 'tel'; 
    tel.attr('data-parsley-trigger','focusout'); 
    tel.attr('data-parsley-trigger-after-failure','keyup'); 
    tel.attr('data-parsley-type','digits'); 
} 
var bericht = $('textarea.ninja-forms-field.bericht-input'); 
if(bericht.length) { 
    bericht.attr('required',''); 
    bericht.attr('data-parsley-trigger','focusout'); 
    bericht.attr('data-parsley-trigger-after-failure','keyup'); 
    bericht.attr('minlength','15'); 
} 

//PARSLEY VALIDATION 
$('form').parsley(); 

//field start validation 
window.Parsley.on('field:validate', function() { 
    var field = this.$element[0].id; 
    $('#' + field).parent().find('i').remove(); //remove glyph 
}); 
//field error 
window.Parsley.on('field:error', function() { 
    var field = this.$element[0].id; 
    // This global callback will be called for any field that fails validation. 
    console.log('Validation failed for: ', field); 
    $('#' + field).parent().append('<i class="fa fa-exclamation-circle fa-lg fa-fw"></i>'); 
}); 
//field success 
window.Parsley.on('field:success', function() { 
    var field = this.$element[0].id; 
    // This global callback will be called for any field that fails validation. 
    console.log('Validation succeeded for: ', field); 
    $('#' + field).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>'); 
}); 

}); 

我希望這將幫助任何人試圖完成與我一樣的。

Answer 2

添加到原始答案......重要的是要記住，一個字段可能有多個驗證器（例如required，maxLength，custom等）。

使用Boris的例子很棒，但是在每次成功的驗證之後都會添加一個fa-check，如果您有多個驗證器，這並不理想。

此外，如果字段被修改並且未通過驗證，則需要刪除成功的fa-check。

最後，對於那些使用自舉的input-group-addon，其中最常使用<i class="fa fa-some-icon"></i>，它可能是一個好主意，添加自定義CSS類和使用find()方法，通過搜索，否則，使用鮑里斯的例子.reomve()的引導i。

jQuery(document).ready(function ($) { 
     'use strict'; 
     // Add fa-check on success, but first remove if it exists 
     window.Parsley.on('field:success', function() { 
      var field = this.$element[0].id; 
      if ($('#' + field).parent().find('.c-success-parsley').length) { 
       $('#' + field).parent().find('.c-success-parsley').remove(); 
      } 
      $('#' + field).parent().append('<i class="c-success-parsley fa fa-check"></i>'); 
     }); 
     // Remove fa-check on error 
     window.Parsley.on('field:error', function() { 
      var field = this.$element[0].id; 
      if ($('#' + field).parent().find('.c-success-parsley').length) { 
       $('#' + field).parent().find('.c-success-parsley').remove(); 
      } 
     }); 
    });