Learning JS the hard way: need help modifying a validate function.

[agingnewbie]

SIMPLIFIED QUESTION: How can I get the error message to display before the black box? (code here)

I have tried to avoid the need to learn javascript, mainly because I'm aging and already have enough web "programming languages" filling up the cranium :) as it is, but have come to the point where I must learn a bit ... at least.

Since I only want to use it to modify an existing jQuery function, that validates form fields using the Bootstrap2 css framework, I haven't extensively read up on the language. I am well acquainted with programming languages in general, and do pick up on things rather quickly, but just don't have the time to acquaint myself with another language that I will only be using once or twice in the next few months, if that. So, please help guide me along with solving the problem below.

The code started out as a jQuery live form validation function created by GeekTantra, then modified for use with Bootstrap2 by ddarren, and worked rather well for basic multi-field forms. However, as things usually go, I wanted to use it in a way it wasn't designed for, and its functionality "broke."

I want to use it to validate a single-field "subscriber" type form that asks only for a valid email address, which has no actual label attached to it, and placed the error (failed validation) message before the field (and a prepended icon) instead of after it.

Originally I just changed the jQuery ".after" function to a ".before" one, and everything seemed to work until the user made multiple attempts resulting in invalid field data, this would place multiple instances of the error message - needless to say it got quite messy :D.

Anyway, after stripping what I believed to be unnecessary code (stuff related to multiple field testing) and having it only validate after the user pressed submit, managed to get it working ... partially. My current problems are the placing of the error message before the prepended field "add-on", plus adding and removing the "error" class to the appropriate "control-group" div.

In addition to the code below, I have setup a jsFiddle bin for testing purposes. All help would be appreciated, and I will definitely take the time to respond to all posts. Thanks.

HTML:

<form id="Form1" class="form-inline" method="POST" action="">
    <fieldset>
        <div class="control-group">
            <div class="controls pull-right">
                <div class="input-prepend input-append">
                    <span class="add-on"><i class="icon-envelope icon-large"></i></span>
                    <input class="span3" id="email" name="email" type="email" required placeholder="Enter your email address">
                    <button class="btn btn-large btn-inverse" type="submit">Subscribe!</button>
                </div>
            </div>
        </div>
    </fieldset>
</form>​
 

CSS just to let me know that the "error" class has been added to the proper div (that has a "control-group" class):

.error { color: red;}​
 

The stripped down JS validate function, so far:

(function(jQuery) {
    var ValidationErrors = new Array();
    jQuery.fn.validate = function(options) {
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_message_class: "help-inline",
            error_container_class: "control-group"
        }, options);
        var SelfID = jQuery(this).attr("id");
        var FormID = jQuery(this).closest('form').attr("id");
        if (!((typeof(ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        jQuery(this).parents("form").submit(function() {
 
            if (validate_field('#' + SelfID)) {
                return true;
            }
            else return false;
        });
 
        function validate_field(id) {
            var self = jQuery(id).attr("id");
            var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
            var validation_state = eval(expression);
            if (!validation_state) {
                if (jQuery(id).prev('.' + options['error_message_class']).length == 0) {
                    jQuery(id).before('<span class="' + options['error_message_class'] + '">' + options['message'] + '</span>');
                    jQuery(id).closest("div ." + options['error_container_class']).addClass("error")
                }
                if (ValidationErrors[FormID].join("|").search(id) == -1) ValidationErrors[FormID].push(id);
                return false;
            }
            else {
                for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                    if (ValidationErrors[FormID][i] == id) ValidationErrors[FormID].splice(i, 1);
                }
                return true;
            }
        }
    };
    jQuery.fn.validated = function(callback) {
        jQuery(this).each(function() {
            if (this.tagName == "form") {
                jQuery(this).submit(function() {
                    if (ValidationErrors[jQuery(this).attr("id")].length == 0) callback();
                    return false;
                });
            }
        });
    };
})(jQuery);
 
 
$(function() {
    $("#email").validate({
        expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/) && VAL) return true; else return false;",
        message: "Error! (proper email required)"
    });
});​
 

As you can see, it uses the Bootstrap2 "error" and "help-inline" classes to show the error message.

[agingnewbie]

If you don't want to waste your time reading the entire post, just read the "SIMPLIFIED QUESTION" and look at the linked site.

Thanks