web-dev-qa-db-fra.com

jQuery Valider wp_editor

J'ai un formulaire, et dans le formulaire, j'utilise

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

générer un TinyMCE, plutôt qu'un simple textarea. Le problème est que je ne peux pas valider le wp_editor avec la validation jQuery. Voici mon code pour la validation jQuery

$(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();
        }

    })
})

Voici mon formulaire:

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

Comment obtenir .validate pour valider le texte que l'utilisateur tape dans wp_editor? Ne faites pas attention au long tableau fou pour le wp_editor. Je viens de mettre tous les css dans ce tableau, parce que je suis toujours en train de tester tout cela dans le thème Twenty Twelve.

Toute aide est appréciée.

2
Nick Passaro

Selon la section jQuery noConflict Wrappers de la page de codex wp_enqueue_script(), la variable $ n'est pas disponible dans WordPress. Vous pouvez remplacer $ par jQuery dans votre code jQuery, ou faire quelque chose comme ceci:

jQuery(document).ready(function($) {
    // your code here
    .
    .
    .
});
2
Pat J