Question

I am getting the titular error when I try to call the validate() function on my form. All the research I have done says “make sure you’re calling it” however I am 95% sure I am as this is my call:

<script type="text/javascript" src="http://test.elitetradersgroup.com.au/wp-content/plugins/a-test/jquery.validate.min.js?ver=3.3.2"></script>
<script type="text/javascript" src="http://test.elitetradersgroup.com.au/wp-content/plugins/a-test/additional-methods.min.js?ver=3.3.2"></script>

When I click on them in Chromes dev tools they come up with the plugin files, leading me to believe they are included. They are being called after jQuery so I highly doubt it’s that.

The form looks like this:

<form action="http://test.elitetradersgroup.com.au/broker-tools/amazon-upload/" method="post" class="upload" enctype="multipart/form-data">
    <label class="title hide" for="theTitle">Email Title</label>
    <input id="theTitle" class="hide" type="text" name="theTitle"><div id="amazon_title_char_count" class="hide"></div><div id="excess_warning" style="display:none; font-weight: bold;color: red;"></div>

    <label class="title hide" for="theSite">Select Email From</label>

        <div class="option hide"><span class="sec_name">Elite Traders Group</span><div class="opt-cont"><input class="radio broadcast" type="radio" id="sec_2" name="theSite" value="s_2"><label class="radio" for="sec_2">Broadcast</label></div></div><div class="option hide"><span class="sec_name">Elite Futures Mastery</span><div class="opt-cont"><input class="radio broadcast" type="radio" id="sec_6" name="theSite" value="s_6"><label class="radio" for="sec_6">Broadcast</label></div><div class="opt-cont"><input class="radio daily-forex-room" type="radio" id="sec_10" name="theSite" value="s_10"><label class="radio" for="sec_10">Daily Forex Room</label></div><div class="opt-cont"><input class="radio day-ahead" type="radio" id="sec_3" name="theSite" value="s_3"><label class="radio" for="sec_3">Day Ahead</label></div><div class="opt-cont"><input class="radio the-daily-beef" type="radio" id="sec_9" name="theSite" value="s_9"><label class="radio" for="sec_9">The Daily Beef</label></div><div class="opt-cont"><input class="radio trade-progress" type="radio" id="sec_5" name="theSite" value="s_5"><label class="radio" for="sec_5">Trade Progress</label></div><div class="opt-cont"><input class="radio trade-recommendation" type="radio" id="sec_11" name="theSite" value="s_11"><label class="radio" for="sec_11">Trade Recommendation</label></div><div class="opt-cont"><input class="radio week-ahead" type="radio" id="sec_4" name="theSite" value="s_4"><label class="radio" for="sec_4">Week Ahead</label></div></div><div class="option hide"><span class="sec_name">Daily Wealth Report</span><div class="opt-cont"><input class="radio technical-toolbox" type="radio" id="sec_1" name="theSite" value="s_1"><label class="radio" for="sec_1">Technical Toolbox</label></div></div><div class="option hide"><span class="sec_name">Elite Options Mastery</span><div class="opt-cont"><input class="radio broadcast" type="radio" id="sec_7" name="theSite" value="s_7"><label class="radio" for="sec_7">Broadcast</label></div></div><div class="option hide"><span class="sec_name">Options Made Easy</span><div class="opt-cont"><input class="radio broadcast" type="radio" id="sec_8" name="theSite" value="s_8"><label class="radio" for="sec_8">Broadcast</label></div></div>    

<label class="title hide">Files to include</label>
<div id="container">
    <div id="filelist"></div>
    <div id="queue-time"></div>
    <br>
    <a id="pickfiles" class="hide" href="#">[Select files]</a>

</div>

    <label class="title hide">Extras</label>

    <input type="checkbox" class="hide" id="positons" name="positions" value="positions-box"><label class="hide" for="positons">Include Positions</label>
    <input type="checkbox" class="hide" id="message" name="message" value="message-box"><label class="hide" for="message">Include message</label>
    <input type="checkbox" class="hide" id="additional-webinar" name="additional-webinar" value="additional-webinar-box"><label class="hide" for="additional-webinar">Include Additional Webinar</label>

    <div class="hide" id="positions-box" style="display:none;">
        <label class="title">Positions Info</label>
        <label>New/Potential Trades</label>
        <input type="text" name="np-trades">
        <label>Current Trades</label>
        <input type="text" name="cur-trades">
        <label>Updates</label>
        <input type="text" name="update-trades">
    </div>
    <div class="hide" id="message-box" style="display:none;">
        <label class="title">Email Message</label>
        <textarea id="message-ta" name="message" cols="50" rows="10"></textarea>
        <div id="message_char_count"></div>
        <div id="message_excess_warning" style="display:none; font-weight: bold;color: red;"></div>
    </div>
    <div class="hide" id="additional-webinar-box" style="display:none;">
        <label class="title">Select Additional Webinar</label>
        <select name="additional-webinar-selection">
            <option value="0" selected="">Please Select</option>
            <option value="173">Del All test(Elite Options Mastery)</option><option value="171">Glob Test(Elite Futures Mastery)</option><option value="169">Test 2(Elite Futures Mastery)</option><option value="167">Test(Elite Futures Mastery)</option><option value="164">Test(Elite Futures Mastery)</option><option value="162">New Min TEst(Elite Futures Mastery)</option><option value="160">Min Height Test(Elite Options Mastery)</option><option value="158">Title Yo(Elite Options Mastery)</option><option value="156">Title(Options Made Easy)</option><option value="96">TT Test(Daily Wealth Report)</option>        </select>
    </div>

    <input type="hidden" value="elitetradersgroup" name="amazon_bucket">
    <button class="hide" id="validate" type="button" onclick="broker_validate()">Validate</button>
    <button class="hide" id="juploader" type="button" style="display:none">Upload</button>
<input type="hidden" name="uid" value="p16ubcu16t1gus18ls12g79ls1"></form>

And the call like this:

<script type="text/javascript">
    function broker_validate() {
        jQuery("form").validate({ //line where the error pops up in console
            rules: {
                theTitle: {
                    required: true
                },
            messages: {
                theTitle: {
                    required: "The email needs a title"
                }
            }
            }
        })

        if (jQuery("form").valid()) {
            jQuery("#validate").hide();
            jQuery("#juploader").show();
        }

    };

</script>

This thing has me stumped, I am sure it’s a stupid little syntax or priority error. Can anybody with fresh eyes spot it?

FYI the site is running wordpress, as you may be able to tell by the jQuery being pulled from a plugins file.

In response to a comment here is the Chrome console output of console.log(jQuery("form"));:

E.fn.E.init
    0: HTMLFormElement
    length: 1
    prevObject: E.fn.E.init
    __proto__: Object

Answer 1

It turns out it must be a wordpress ‘quirk’. I was calling the js from a different plugin and using wp_equeue_script() The wp_equeue_script() added ?ver=3.3.2 to the end and as it wasn’t ver 3.3.2 it wasn’t being loaded depsite chrome showing it as called.