Parsley.js自定義驗證程序中的動態消息

Question

我正在使用自定義驗證程序檢查出生日期，到目前爲止它幾乎沒有任何內容，但我試圖根據錯誤添加動態消息並且它不工作對我來說，它顯示一個空白的消息，任何想法的容器？

下面是一段代碼，自定義驗證：

window.Parsley.addValidator('age', { 
      validate: function(value, id){ 
       switch(id){ 
        case 'main': 
         var day = $('#birthdate_day').val(); 
         var month = $('#birthdate_month').val(); 
         var year = $('#birthdate_year').val(); 
         if(!day || !month || !year){ 

          window.Parsley.addMessage('en', 'age','Error1 '); 

          return false; 
         } else { 
          window.Parsley.addMessage('en', 'age','Error 2'); 
         } 
        break; 
       } 
       return true; 
      }, 
      messages: { 
       en: 'Default error', 
      } 
     }); 

我已經試過另一件事是驗證的執行過程中設置數據香菜年齡消息=「錯誤」，但只有它第二次驗證運行時顯示錯誤。

在此先感謝。

EDIT1：

window.Parsley.addValidator('age', { 
      validate: function(value, id){ 
       $('.birthdate_container').find('ul').remove(); 
       switch(id){ 
        case 'main': 
         var day = $('#birthdate_day').val(); 
         var month = $('#birthdate_month').val(); 
         var year = $('#birthdate_year').val(); 
         if(!day || !month || !year){ 
          return $.Deferred().reject("One of them is blank"); 
         } else if(day > 2 || month > 2 || year < 2016){ 
          return $.Deferred().reject("Else test of another message"); 
         } else { 
          return true; 
         } 
        break; 
       } 
       return true; 
      }, 
     }); 

一點清潔的解決方案（不介意其他人，它的存在只是爲了測試），但仍然不能使它工作becasue我不知道我該怎麼更新返回true的3個元素的類。

編輯2：

只需使用jQuery來處理類工作，但是，因爲我需要刪除UL（否則郵件會疊加，我不希望出現這種情況），只要有觸發後的錯誤另一個錯誤在那裏，它只是抹去它。

window.Parsley.addValidator('age', { 
      validate: function(value, id){ 
       $('.birthdate_container').find('ul').remove(); 
       switch(id){ 
        case 'main': 
         var day = $('#birthdate_day').val(); 
         var month = $('#birthdate_month').val(); 
         var year = $('#birthdate_year').val(); 
         if(!day || !month || !year){ 
          $('.birthdate_container').find('.parsley-success').removeClass('parsley-success').addClass('parsley-error'); 
          return $.Deferred().reject("Un campo es blanco"); 
         } else if(day > 2 || month > 2 || year < 2016){ 
          $('.birthdate_container').find('.parsley-success').removeClass('parsley-success').addClass('parsley-error'); 
          return $.Deferred().reject("dia > 2 o mes > 2 o años < 2016"); 
         } else { 
          $('.birthdate_container').find('.parsley-error').removeClass('parsley-error').addClass('parsley-success'); 
          return true; 
         } 
        break; 
       } 
       return true; 
      }, 
     }); 

Answer 1

我最後的工作：

window.Parsley.addValidator('age', { 
      validate: function(value, id, instance){ 
       var container = instance.$element.closest('.form-item'); 
       container.find('ul').remove(); 
       var msg = ''; 
       var day = container.find('select').filter(function() {return this.id.match(/\w*birthdate_day/);}); 
       var month = container.find('select').filter(function() {return this.id.match(/\w*birthdate_month/);}); 
       var year = container.find('select').filter(function() {return this.id.match(/\w*birthdate_year/);}); 
       day.parsley().reset(); 
       month.parsley().reset(); 
       year.parsley().reset(); 
       var helpContainer = '<ul class="parsley-errors-list filled"><li class="parsley-age"></li></ul>'; 

       if(value === ''){ 
        container.find('select').parent().addClass('parsley-error'); 
        msg = "This field is required"; 

       } 
       /* Take several notes here 
       1) I wrap my select in a div, for stylying purposes, so I check the default placeholder, when something is selected 
        this placeholder is changed with the value of the select (this is not shown here, it's done elsewhere) 
       2) I use DD - MM - YYYY as placeholders, if any of these place holders are already showing in the div, 
        then I don't validate them because they are still 'clean' 
       3) If the user clicks the submit button though, I set a js variable with this action and then validate the value anyways 
        because I don't allow blank dates, however, I can't use the parsley-required feature as it messes up my validation 
       */ 
       else if(obj.action !== 'submit' && (day.parent().attr('data-placeholder') === 'DD' || 
        month.parent().attr('data-placeholder') === 'MM' || 
        year.parent().attr('data-placeholder') === 'YYYY')) 
       { 
        container.find('select').parent().removeClass('parsley-error') 
        container.find('select').filter(function(){ return this.value}).parent().addClass('parsley-success'); 
        return true; 
       } 
       else if(day.val() === '' || month.val() === '' || year.val() === '') { 
        container.find('select').parent().addClass('parsley-error'); 
        msg = "This field is required"; 
       } 
       /* 
       I have another validation process past this point that uses a different error, but I'll point out the very basic 
       which is just make some other validation and fill the message you want to display. 

       Let's assume you want the person not to be underage and you control that in your form somehow 
       */ 
       else if (!underageAllowed){ 
        var bdate = String("00" + day.val()).slice(-2) + "/" + String("00" + month.val()).slice(-2) + "/" + year.val(); 
        var tdate = moment(); // Today 
        bdate = moment(bdate,'DD/MM/YYYY'); 
        var age = tdate.diff(bdate, 'years'); 
        if(age < 18){ 
         container.find('select').parent().addClass('parsley-error'); 
         msg = "Only people with over 18 years old are allower"; 
        } 
       }     

       if(msg !== ''){ 
        if(obj.action === 'submit'){ 
         container.append(helpContainer); 
         container.find('.parsley-age').html(msg) 
        } 
        return $.Deferred().reject(msg); 
       } else { 
        container.find('select').filter(function(){ return this.value}).parent().addClass('parsley-success'); 
        return true; 
       } 
      }, 
     }); 

我則驗證分配到具有爲每個 「birthdate_」 作爲ID（birthdate_day，birthdate_month和birthdate_year）

$("[id^='birthdate_']").attr('data-parsley-age','true') 
      .attr('data-parsley-trigger', "change") 
      .attr('data-parsley-validate-if-empty', "true"); 

正確errorContainer各個領域字段

$('#main_form').parsley({ 
      errorsContainer: function(el){ 
       if(el.$element.is('[data-parsley-age]')) 
        return el.$element.closest('.form-item'); 
      }, 

最後，我如何有我的html佈局

<div class="form-item"> 
<label>Date of birth</label> 
<div class="dropdown" data-placeholder="DD"> 
    <select id="birthdate_day" name="birthdate_day"> 
     <option value="">-</option> //If user selects this, the validation throws error for all the fields 
     //Options 1 through 31 
    </select> 
</div> 
<div class="dropdown" data-placeholder="MM"> 
    <select id="birthdate_month" name="birthdate_month"> 
     <option value="">-</option> //If user selects this, the validation throws error for all the fields 
     //Options 1 through 12 
    </select> 
</div> 
<div class="dropdown" data-placeholder="YYY"> 
    <select id="birthdate_year" name="birthdate_year"> 
     <option value="">-</option> //If user selects this, the validation throws error for all the fields 
     //Options 1 through 12 
    </select> 
</div> 

希望這有助於出人，我花了一些時間來想出這一切。

Answer 2

它沒有很好的記錄，但你可以通過返回一個被拒絕的承諾返回驗證器的錯誤信息。檢查this example。

Answer 3

後有太多修修補補，我覺得我得到了它，我必須重新設置所有以前的香菜，所以如果需要它可以重寫消息，即使是同樣的一個

window.Parsley.addValidator('age', { 
      validate: function(value, id){ 
       switch(id){ 
        case 'main': 
         var container = $('.birthdate_container'); 
         container.find('ul').remove(); 
         var day = $('#birthdate_day'); 
         day.parsley().reset(); 
         var month = $('#birthdate_month'); 
         month.parsley().reset(); 
         var year = $('#birthdate_year'); 
         year.parsley().reset(); 

         if(day.val() === '' || month.val() === '' || year.val() === ''){ 
          container.find('.dropdown').removeClass('parsley-success').addClass('parsley-error'); 
          return $.Deferred().reject("Un campo es blanco"); 
         } else if(day.val() > 2 || month.val() > 2 || year.val() < 2016){ 
          container.find('.dropdown').removeClass('parsley-success').addClass('parsley-error'); 
          return $.Deferred().reject("dia > 2 o mes > 2 o años < 2016"); 
         } else { 
          container.find('.dropdown').removeClass('parsley-error').addClass('parsley-success'); 
          return true; 
         } 
        break; 
       } 
       return true; 
      } 
     }); 

PD：再次，第二個就在那裏測試你可以拋出不同的信息;驗證本身是無關緊要的。

Answer 4

如果你只想處理動態消息，不包含在你的消息的消息文本對象，然後在您的驗證方法：

instance.addError('en', {message: 'Hello World'}); 

就這麼簡單。只需閱讀帶註釋的源代碼，它就會揭示一大堆簡單的功能。

編輯：其實我剛纔注意到你需要的東西，或者拋出它自己的錯誤信息，所以您可以修復的東西，如：

messages: { 
    en: '...' 
} 

我只是測試，工作正常