Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a form, and in the form, I use

<?php wp_editor('', 'user_submitted_progress', $settings = array('textarea_name' => 'user_submitted_progress')); ?>

to generate a TinyMCE, rather than a simple textarea. The problem is that I can't get the wp_editor to be validated by jQuery Validation. Here is my code for jQuery Validation

$(document).ready(function() {
    $("#user_submitted_post").validate({

        errorPlacement: function(error, element) {},

        debug: false,
        rules: {
            user_submitted_title: {required: true},
            user_submitted_progress: {required: true},
            user_submitted_goals: {required: true},
            user_submitted_categories: {required: true},
            user_submitted_tags: {required: true},
        },

        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                $("#error-message").show().text("Please make sure that all required fields have been filled out.");
            } else {
                $("#error-message").hide();
            }
        },

        submitHandler: function(form) {
            tinyMCE.triggerSave();
            var serialized = $(form).serialize();
            console.log(serialized);
            $(form).ajaxSubmit();
        }

    })
})

Here is my form:

<?php if (is_user_logged_in()) { ?>

    <div id="error-message"></div>

    <form id="user_submitted_post" action="" method="POST" enctype="multipart/form-data">

        <h2>Title</h2>
        <input type="text" id="user_submitted_title" name="user_submitted_title" value="">

        <p>Please provide detailed information about the long-term goals of your project, as well as your current project progress. Feel free to format your text using boldness, italics, lists, and block quotes. Simply click on the formatting option you'd like to use and start typing. When you no longer need the format you have selected, hit enter to go to the next line, and click on the active format button to end formatting.</p>

        <h2>Project Progress</h2>
        <?php wp_editor('', 'user_submitted_progress', $settings = array('textarea_name' => 'user_submitted_progress', 'media_buttons' => false, 'quicktags' => false, 'textarea_rows' => 15, 'editor_css' => '<style type="text/css">.wp_themeSkin .mceListBox .mceText {width: 81px;} .wp_themeSkin table.mceToolbar {margin: 5px;} td.mceToolbar > div {height: inherit;} tr.mceLast {display: none;} .wp_themeSkin .mceButton {margin: 1px 12px;}</style>', 'tinymce' => add_filter("mce_buttons", "base_extended_editor_mce_buttons", 0), add_filter("mce_buttons_2", "base_extended_editor_mce_buttons_2", 0)) ); ?>

        <h2>Project Goals</h2>
        <?php wp_editor('', 'user_submitted_goals', $settings = array('textarea_name' => 'user_submitted_goals', 'media_buttons' => false, 'quicktags' => false, 'textarea_rows' => 15, 'tinymce' => add_filter("mce_buttons", "base_extended_editor_mce_buttons", 0), add_filter("mce_buttons_2", "base_extended_editor_mce_buttons_2", 0)) ); ?>

        <h2>Category</h2>
        <?php wp_dropdown_categories($args = array('selected' => Uncategorized, 'orderby' => 'name', 'hide_empty' => 0, 'hierarchical' => 1, 'id' => 'user_submitted_categories', 'name' => 'user_submitted_categories')); ?>

        <h2>Tags</h2>
        <p>Separate tags with commas.</p>
        <input type="text" id="user_submitted_tags" name="user_submitted_tags" value="">

        <h2>Video</h2>
        <p>Copy and paste links from Youtube and Vimeo in the field below</p>
        <textarea id="user_submitted_video" name="user_submitted_video"></textarea>

        <h2>Audio</h2>
        <p>Copy and paste links from Soundcloud in the field below</p>
        <textarea id="user_submitted_audio" name="user_submitted_audio"></textarea>

        <h2>Images</h2>
        <input type="file" name="upload_attachment[]" multiple="multiple">

        <?php wp_nonce_field('post_nonce', 'post_nonce_field'); ?>

        <button type="submit" name="submitbutton" id="submitbutton">Submit</button>

    </form>

<?php } else { ?>

    <?php echo 'Sorry, but you need to be logged in to see that. You can <a href="'; ?>
    <?php echo wp_login_url( get_permalink() ); ?>
    <?php echo '" title="Login">login here</a>'; ?>

<?php } ?>

How do I get .validate to validate the text that the user types in the wp_editor? Don't mind the crazy long array for the wp_editor. I just put all of the css in that array, because I'm still just testing all of this in the Twenty Twelve theme.

Any help is appreciated.

share|improve this question
    
and when you call tinyMCE.triggerSave() before validation runs? –  ungestaltbar Oct 21 '13 at 7:07
add comment

1 Answer

Per the jQuery noConflict Wrappers section of the wp_enqueue_script() Codex page, the $ variable is not available in WordPress. You can replace $ with jQuery in your jQuery code, or do something like this:

jQuery(document).ready(function($) {
    // your code here
    .
    .
    .
});
share|improve this answer
    
The $ works in WordPress. The jQuery is all in between <script> tags, so it all works. The problem is that the validator just isn't checking the wp_editors, although the other fields that are regular inputs and regular textareas are getting checked for validation. –  Nick Passaro May 15 '13 at 19:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.