jQuery验证-无法调用未定义的方法“调用”

Question

Not sure why this isn't working. I'm sure you all know what I'm trying to achieve here.

When the script is run I get an Uncaught TypeError: undefined is not a function on jquery.validate.js line:366 which refers to this hunk of code:

function delegate( event ) {
            var validator = $.data( this[ 0 ].form, "validator" ),
                eventType = "on" + event.type.replace( /^validate/, "" ),
                settings = validator.settings;
            if ( settings[ eventType ] && !this.is( settings.ignore ) ) {
                settings[ eventType ].call( validator, this[ 0 ], event );
            }
        }                           ^^^^ HERE

I'm using codeigniter2 framework so apologies if my form page doesn't make sense to some.

new_page.php (The relevant bit)

<?php echo form_open(site_url('admin/manage_pages/new_page'),
                            array('id' => 'new-page-form')) . PHP_EOL; ?>
    <div class="form-group">
        <?php echo form_label('Page Title', 'page-title',
                                'class="control-label"') . PHP_EOL; ?>
        <?php echo form_input(array(
                                'name' => 'page-title',
                                'id' => 'input-page-title',
                                'max-length' => '255',
                                'placeholder' => 'Enter Page Title',
                                'class' => 'form-control')) . PHP_EOL; ?>
    </div><!-- /.form-group -->
    <div class="form-group">
        <?php echo form_label('Url', 'slug', 'class="control-label"'); ?>
        <span id="input-slug-span" class="form-control">
            <span id="input-slug-static"><?php echo site_url(); ?></span>
            <?php echo form_input(array(
                                    'name' => 'slug',
                                    'id' => 'input-slug')); ?>
        </span>
    </div><!-- /.form-group -->

and in new_page.validation.js

$(document).ready(function() {

    //--------------------------------------------------------------------------------------
    //
    //  New Page Client Side Validation
    //
    //--------------------------------------------------------------------------------------

    $('#new-page-form').validate({

        onkeyup:true,

        rules: {
            'page-title': {
                required: true,
                remote: { 
                    url: 'new_title_exists',
                    type: 'post',
                    data: {
                        'page-title': function() { return $("#input-page-title").val(); }
                    }
                }
            },
            'slug': {
                required: true,
                remote: {
                    url: 'new_slug_exists',
                    type: 'post',
                    data: {
                        'slug': function() { return $('#input-slug').val(); }
                    }
                }
            }
        },
        messages: {
            'page-title': {
                required: 'Page Title is required.',
                remote: 'Page Title must be unique.'
            },
            'slug': {
                required: 'A URL slug is required',
                remote: 'The URL must be unique.'
            }
        }
    })
})

Any help would be grateful! Cheers guys

Answer 1

$('#new-page-form').validate({
    // onkeyup:true, // REMOVE THIS
    rules: {
        'page-title': {
            required: true,
            remote: {  // element's value IS always sent
                url: 'new_title_exists',
                type: 'post',
                data: {  // MUST send the CSRF Token Value
                    'csrftoken': function() {
                        return $('input[name="csrftoken"]').val();
                    }
                }
            }
        },
        ....

• onkeyup: true could potentially break the normal functioning of the plugin. As per documentation, "a boolean true is not a valid value" . That's because the onkeyup ability is already the default.

• Whenever using jQuery Validate remote method, or any ajax() , in a CodeIgniter project, you also have to send the CSRF token within the data , otherwise you will get a 500 server error. You can pick this up from the hidden input element on your form. You do not need to send the value of the input element being evaluated, however, because that data is already being sent by default. Change the name above to match what's showing in the rendered source code of your form.