Hi all!

I'm trying to validate this form:

<form action="<?php $_SERVER['PHP_SELF'] ?>" class="horizontal-form" name="settings" id="settings" method="post">
    <div class="row-fluid">
        <div class="span4 ">
            <div class="control-group">
                <label class="control-label" for="firstName">First Name</label>
                <div class="controls">
                    <input type="text" id="fn" class="m-wrap span12" value="<?php echo $userInfo['fn']; ?>">
                </div>
            </div>
        </div>
    </div>
</form>

I've added my validation js files.. These are the main vaildation files:

  • <script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
  • <script type="text/javascript" src="assets/plugins/jquery-validation/dist/additional-methods.min.js"></script>

This one validates this particular form:

  • <script src="assets/scripts/settings.js" type="text/javascript"></script>

In this file settings.js I have this (Just a snippet):

var validateSettings = function () {

    return {
        //main function to initiate the module
        init: function () {

            var settingsForm = $('#settings');

            settingsForm.validate({
                errorElement: 'label', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                    fn: {
                        required: true,
                        lettersonly: true,
                        minlength: 2
                    }

    },

            messages: {
                fn: {
                    required: "Please enter your first name.",
                    minlength: "Minimum of 2 characters."
                } 
            },

            invalidHandler: function (event, validator) {   

            },

            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.control-group').addClass('error'); // set error class to the control group
            },

            success: function (label) {
                label.closest('.control-group').removeClass('error');
                label.remove();
            }
        });
    }
        /*IGNORE ALL OF THESE BRACKETS, I CUT A LOT OF THE FILE OUT*/
};

}();

At the end of the page containing the form I execute the vaidation using:

    <script>
        jQuery(document).ready(function() {    
           validateSettings.init();
        });
    </script>

The form is much larger but I've seletced one field from each file to debug.

Why is this validation kicking me in the teeth?? It works everywhere else on the site. Thanks for any help!

Member Avatar for LastMitch

The form is much larger but I've seletced one field from each file to debug.

What do you mean by larger? You mean the input tags? Can you explained a little more in detail of what is the issue?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.