javascript - 使用 Parsley 验证 TinyMCE

Question

我有一个表单，它是多步骤向导的一部分。在一个步骤中，表单有一个输入和一个 TinyMCE 编辑器。

在进入下一步之前，我使用 ParsleyJS 验证每一步的内容。我的向导步骤和验证代码定义如下:

<form class="form-horizontal" id="step1Form">
  <div class="form-group">
    <label for="name" class="col-sm-3 control-label">Name:</label>
    <div id="nameDiv" class="col-sm-9">
      <input type="text" maxlength="50" class="form-control" id="name" name="name" placeholder="Name" required="" data-parsley-group="block-1">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-3 control-label">
      <label for="consumerId">Description:</label>
    </div>
    <div id="descDiv" class="col-sm-9">
      <div id="desc_area" data-type="textarea" data-pk="1" required="" data-parsley-group="block-1" data-parsley-tinymce="2"></div>
    </div>
  </div>
</form>

<script type="text/javascript">
jQuery(document).ready(function ($) {
    Parsley.addValidator('tinymce', {
      validateString: function(value) {
        // The validation code goes here
        return true;
      },
      messages: {
        en: 'The code is invalid. This should not be shown.'
      }
    });

    $.extend(Parsley.options, {
        errorClass: 'has-error',
        successClass: 'has-success',
        classHandler: function(el) {
            return el.$element.closest(".form-group");
        },
        errorsWrapper: '<span class="help-block">',
        errorTemplate: '<div></div>'
    });

    tinymce.init ({
      selector: '#desc_area',
      inline: false,
      force_br_newlines: false,
      force_p_newlines: true,
      forced_root_block: '',
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code insertdatetime media contextmenu'
      ],
      toolbar: 'insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image'
    });
});

function validateStep(step) {
  if (step == 1) {
    console.log("About to perform validation");
    return $('#step1Form').parsley({
      inputs: Parsley.options.inputs + ',[data-parsley-tinymce]'
    }).validate({group: 'block-1'});
  } else if (step == 2) {
    // validation for step 2
  } else if (step == 3) {
    // validation for step 3
  } else if (step == 4) {
    // validation for step 4
  }
  return false;
}
</script>

当我单击下一步时，它会将 TinyMCE 编辑器标记为无效，而不会调用自定义验证器。现在我确定我的验证器不正确，但我找不到如何定义自定义验证器(Parsley 的文档在涉及自定义验证器的定义元素时有点令人费解)。

知道如何让它工作吗？

Answer 1

您应该将 TinyMCE 绑定(bind)到 <textarea>而不是 <div> .如果是这样，你不需要自定义验证器，你只需要添加 required或 data-parsley-required属性。

检查这个working jsfiddle ，以及下面的代码:

<form class="form-horizontal" id="step1Form">
    <div class="form-group">
        <label for="name" class="col-sm-3 control-label">Name:</label>
        <div id="nameDiv" class="col-sm-9">
            <input type="text" maxlength="50" class="form-control" id="name" name="name" placeholder="Name" required="" data-parsley-group="block-1">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-3 control-label">
            <label for="consumerId">Description:</label>
        </div>
        <div id="descDiv" class="col-sm-9">
            <textarea id="desc_area" data-type="textarea" data-pk="1" required="" data-parsley-group="block-1"></textarea>
        </div>
    </div>
</form>

<script>
    jQuery(document).ready(function ($) {
        $.extend(Parsley.options, {
            errorClass: 'has-error',
            successClass: 'has-success',
            classHandler: function(el) {
                return el.$element.closest(".form-group");
            },
            errorsWrapper: '<span class="help-block">',
            errorTemplate: '<div></div>'
        });

        tinymce.init ({
            selector: '#desc_area',
            inline: false,
            force_br_newlines: false,
            force_p_newlines: true,
            forced_root_block: '',
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code insertdatetime media contextmenu'
            ],
            toolbar: 'insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image'
        });

        // NOTE: This is only here for testing purposes.
        // Somewhere in your code you should be validating each block
        $("form").parsley();
        $("form").on('submit', function(e) {
            e.preventDefault();

            $(this).parsley().validate();
            if ($(this).parsley().isValid()) {
                alert('ok');
            } else {
                alert('crap!');
            }
        })
    });
</script>