Question

我在模式中有一个表单我尝试在Parsley成功验证后使用ajax手动POST。当打开模态时，我首先在表单上初始化Parsley：

modalLaunchers.createTaskFormValidation = $(document.getElementById('create-task-form')).parsley(parsleyOptions);

当提交表单时，我有以下代码：

  modalLaunchers.createTaskFormValidation.validate();
  if (modalLaunchers.createTaskFormValidation.isValid()) {
         // do ajax POST
    }

如果字段不正确，则会正确突出显示这些字段。但是，如果这些字段然后被更正并重新提交表单，我会收到以下错误：

Uncaught Validator `undefined` does not handle multiple values

validate（）和isValid（）都抛出该错误。

显然，我希望再次按下提交时重新验证表单，如果有效，请继续执行POST。但是，由于该错误被抛出，因此不再进行任何操作。我的Parsely选项如下：

const parsleyOptions = {
    // errorsWrapper: '',
    errorTemplate: '<span class="error-msg"></span>',
    // successClass: 'has-success',
    errorClass: 'has-error',
    classHandler: (el) => {
        console.log(el.$element.closest('div.form-group'));
        return el.$element.closest('div.form-group');   
    },
    excluded: 'input.select2-search__field',
};

有什么建议吗？非常感谢

Answer 1

我设法让这个工作，但在验证周围使用try catch块。这很奇怪，因为当验证函数在初始验证后再次使用时抛出错误，它仍然会更新parsley对象以及各个字段是否已经失败（通过fields.field.validationResult属性）并使用失败的字段更新UI。因此下面的工作（虽然它确实感觉非常混乱）：

            event.preventDefault();
            try {
                modalLaunchers.createTaskFormValidation.validate();
            } catch (err) {
                console.log(err);
            }
            if (modalLaunchers.createTaskFormValidation.fields.some(field => field.validationResult !== true) === false) {

    // ensure every field.validationResult is true. If it is, continue to the post, if not return and keep the UI errors

            }

仍然不确定这是一个错误还是我的错误实现。

Answer 2

我无法确切解释原因，但是由于使用了

，因此出现了此错误

= f.input :read_parent_info, as: :boolean, required: true, input_html: {data: {parsley_select_yes:''}

但是我注意到这对它很好：

= f.input :read_code_conduct, as: :radio_buttons, required: true, input_html: {data: {parsley_select_yes:''}}, collection: @enrolment_service.yes_no_radio_options,

区别在于，越野车的类型是：boolean，而有效的是收音机。

所以也许在您的表单中您正在做类似的事情。

Parsley Validation throw：Validator`undefined`不处理多个值

2 个答案: