Validating TinyMCE using Parsley

问题

I have a form which is part of a multi-step wizard. At one step, the form has one input and one TinyMCE editor.

I'm using ParsleyJS for validating the content of each step before going to the next step. I have my wizard step and validation code defined as below:

<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>

When I click next, it marks the TinyMCE editor as invalid without calling the custom validator. Now I'm sure my validator is incorrect, but I couldn't find how to define a custom validator (Parsley's documentation was a bit puzzling when it came to definition elements of custom validators).

Any idea how I can get this to work?

回答1:

You should be binding TinyMCE to a <textarea> and not to a <div>. If so, you don't need custom validators, you simply need to add the required or data-parsley-required attribute.

Check this working jsfiddle, and the code below:

<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>

来源：https://stackoverflow.com/questions/36993570/validating-tinymce-using-parsley