向Parsley.js添加两个验证器

时间:2013-12-18 10:11:02

标签: javascript jquery parsley.js

我基本上想要做的是让用户在两个独立数组的输入字段中输入的检查值。一个是会产生错误的单词数组,另一个是会引发警告的单词数组。 我创建了这两个函数,当它们与两个不同的字段绑定时它们似乎工作正常

 , warning: function () {
      var that = this;
      return {
            validate: function (val,arrayRange) {
                    var warningWords = new Array();
                    warningWords[0]="Cricket";
                    warningWords[1]="Football";
                for (var i = 0; i < warningWords.length; i++) {
                        if(val.toLowerCase()===warningWords[i].toLowerCase())
                            return false;
                }
                return true;
        }
        , priority: 32
      }
    }
  , wrong: function () {
      var that = this;
      return {
            validate: function (val,arrayRange) {
                    var errorWords = new Array();
                    errorWords[0]="Justin";
                    errorWords[1]="Chester";
                for (var i = 0; i < errorWords.length; i++) {
                        if(val.toLowerCase()===errorWords[i].toLowerCase())
                            return false;
                }
                return true;
        }
        , priority: 32
      }
    }

和HTML

  <label for="email">ERROR :</label>
<input name="message1" id="error" parsley-trigger="keyup" parsley-wrong="" ></input>

<label for="message">Warning</label>
<input name="message" parsley-trigger="keyup" parsley-warning=""></input>
<button type="submit">Submit</button>

是否可以将这两个函数绑定到同一个输入字段? 其次,我希望在发出警告的情况下输入字段背景会变黄,如果出现错误,它应该变为红色 我已经超过了欧芹错误类。但是,如果警告功能使表单无效,我可以创建另一个类。

第三,即使警告功能导致字段无效,也可以提交表格吗? 通过JS很容易实现,所以我们可以阻止欧式语句停止表单验证。

1 个答案:

答案 0 :(得分:0)

对于Q1,您应该能够在同一输入上拥有多个自定义验证器,就像您可以使用多个parsley的内置验证器一样。如果要强制首先验证,请提高或降低优先级。

作为对Q2的回应,您可以在输入中添加其他类来修改parsley-error样式。这是一个例子:

input.parsley-error {
    background-color: #f00;
}

input.parsley-error.warning {
    background-color: #ff0;
}

因此,如果您在同一个输入字段上同时拥有两个验证器,则可以让警告验证器在返回false时添加.warning类,并在返回true时删除该类。

对于Q3,您应该能够通过覆盖'onFormValidate'侦听器来提交表单,尽管验证问题并且返回true,即使'isFormValid'参数为false。

$('#formId').parsley({
    listeners: {
        onFormValidate: function(isFormValid, event, ParsleyForm) {
            return true;
        }
    }
});