使用jQuery来验证Django的形式

Question

i have the following code to validate a form using jquery i don't know why isn't it working?

jQuery(function(){
    jQuery("#task_name").validate({
        expression: "if(VAL) return true; else return false;", message: "please enter task name" 
    });
    jQuery("#task_city").validate({
        expression: "if ( VAL) return true; else return false;", message: "please enter task  city"
    });
    jQuery("#task_address").validate({
        expression: "if (VAL) return true; else return false;", message: "please enter task   address"
    });
    jQuery("#task_desc" ).validate({
        expression: "if (VAL) return true; else return false;", message: "please enter task   desc"
    });
    jQuery("#task_price").validate({
        expression: "if (VAL) return true; else return false;", message: "please enter task  price"
    }); 
});

Answer 1

As per the jQuery Validation plugin documentation you must use messages and not message .

The plugin also works for an entire form not one form field at a time, please read the documentation thoroughly.

According to the docs something like this should work for you:

jQuery(function(){
    /* You do not need to use jQuery instead of $ inside of a jQuery declared function */
    $("#form_id").validate({
        rules: {
            /* #task_name name */
            name1: "required",
            /* #task_city name */
            name2: "required",
            /* #task_address name */
            name3: "required",
            /* #task_desc name */
            name4: "required",
            /* #task_price name */
            name5: "required"
        },
        messages: {
           name1: "please enter task name",
           name2: "please enter task city",
           name3: "please enter task address",
           name4: "please enter task desc",
           name5: "please enter task price",
       }
    });
});​

Answer 2

Django will prefix form fields with 'id_' in addition to any prefix you may have added to the form to prevent naming collisions between form classes with identical fields. I'm betting that you're simply referencing the fields by ID incorrectly. Inspect the DOM of your rendered template with Firebug or similar inspection utility and make sure you're referencing the fields by the correct ID.