Validating select box with jquery validate and chosen plugins-Collection of common programming errors

Try something like this instead.

$(document).ready(function() {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        rules: {
            nameedit: {
                required: true,
                maxlength:100
            },
            unitedit:{
                required: true,
            }
        }
    });

    // test for valid form
    $('#save').on('click' function() {
        if($("#producteditform").valid()) {
            // do this on valid form
        } else {
            // do this on invalid form
        }
    });

});

$('#producteditform').validate() initializes the validate plugin on the form.

$('#producteditform').valid() programmatically triggers an actual validation test and returns a true/false boolean value.

Alternatively, since your event is the form click on submit event, then you simply use the built-in submitHandler callback function instead. (There is no need to create another click handler.)

$(document).ready(function() {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        rules: {
            nameedit: {
                required: true,
                maxlength:100
            },
            unitedit:{
                required: true,
            }
        },
        submitHandler: function(form) {
            // do this on valid form
        }
    });

});

Full documentation:

http://docs.jquery.com/Plugins/Validation

Until you show your HTML output instead of the PHP, here is a generic example of how to validate a select element:

http://jsfiddle.net/6Dt7F/

Important, the very first, or the default option in the select element must contain value="" or the required rule will fail.


    please choose...
    option 1
    option 2
    option 3

EDIT:

I still don’t have enough code to make a working demo. However, since the chosen plugin is hiding the actual form elements, you’ll have to do the following…

1) Target the actual form element that is going to get validated and pass the data, not the visual element created by chosen.

2) Enable jQuery Validate to work on hidden elements by setting ignore: [] option.

Try this…

$(document).ready(function () {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        ignore: [], //

Originally posted 2013-11-15 09:10:35.