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: '...' 
} 

我只是测试，工作正常