Validating a form and alerting the server if passed This is my first script in object-oriented JavaScript (jQuery 1.5.2). Its purpose is to simply validate a form (nothing fancy at the moment just checks if any value is present on required fields) and if validation is passed it submits the form via Ajax and alerts the server's response.

It would be great if more experienced programmers could review this and tell me what could be improved and what's dead wrong.

Here is the full working page:

&lt;script type="text/javascript"&gt;
var formObj = {
     validate : function(theForm, required) {
            var toValidate = required.split(',');
            for (i in toValidate) {
                 var toValidateField = $('*[name*='+$.trim(toValidate[i])+']', theForm);
                 var valueLength = toValidateField.val().length;
                 if (valueLength === 0) {
                        toValidateField.addClass('invalid');
                        formObj.inputListener(toValidateField);
                 }
            }
            if ($('.invalid').length === 0) {
                 return 'valid';
            } else {
                 return 'invalid';
            }
     },
     inputListener : function(theField) {
            theField.keyup(function() {
                 if ($(this).val().length &gt; 0) {
                        theField.removeClass('invalid');
                 } else {
                        theField.addClass('invalid');
                 }
            });
     },
     ajaxSubmit : function(formToSubmit) {
            $.ajax({
                 url: formToSubmit.attr('action'),
                 type: formToSubmit.attr('method'),
                 data: formToSubmit.serialize(),
                 success: function(output) {
                        //return output;
                        alert(output);
                 },
                 error: function() {
                        alert('Something went wrong!');
                 }
            }); 
     }

} // end formObj

&lt;/script&gt;

&lt;script type="text/javascript"&gt;
     $(function() {
            $('form').submit(function(e) {
                 e.preventDefault();
                 var thisForm = $(this);

                 // validate form
                 validate = formObj.validate(thisForm, 'username, message');

                 // if valid submit via ajax
                 if (validate === 'valid') {
                        formObj.ajaxSubmit(thisForm);
                 }
            });
     });
&lt;/script&gt;

&lt;style type="text/css"&gt;
     .invalid { border: 2px solid red; }
&lt;/style&gt;

&lt;form action="script.php" method="post"&gt;
     &lt;label&gt;Choose Username&lt;/label&gt;&lt;br /&gt;
     &lt;input type="text" name="username" /&gt;&lt;br /&gt;
     &lt;label&gt;Choose Password&lt;/label&gt;&lt;br /&gt;
     &lt;input type="text" name="password" /&gt;&lt;br /&gt;
     &lt;label&gt;Message to Admin&lt;/label&gt;&lt;br /&gt;
     &lt;textarea name="message"&gt;&lt;/textarea&gt;&lt;br /&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;


Contents of script.php

&lt;?php

    while (list($key, $value) = each($_POST)) {
        echo $_POST[$key].' - ';
    }

?&gt;
Its only a small Quibble with your code but I find the naming of formObj a little odd. For me I see this as a FormValidator or FormExtender or some such.

Another point would be the for(i in ....) should be for(var i in ...) it will run either way and I believe it is just a matter of coding style.

Also you have functions like:

validate: function(theForm, required({....


I think it helps debugging if you do this instead:

validate: function FormValidate(....


It has the disadvantage of polluting the namespace but makes debugging easier as the function is now not anonymous.

If you were making this a class to instantiate you would write it like so:

var FormValidator = function(theForm)
{
    this.formElement = theForm;
    return this;
}

FormValidator.prototype = {

     validate : function(theForm, required) {
            //...
     },
     inputListener : function(theField) {
            //...
     },
     ajaxSubmit : function(formToSubmit) {
            //...
     }

};

var mainForm = new FormValidator(document.forms[0]);


If you were doing a  Singleton pattern something like:

var FormValidator = function()
{
    return this;
}

function GetFormValidatorInstance()
{
    return window.__formValidatorInstance || new FormValidator();
}


These last two are probably overkill if you just want a simple Component. A more in depth example of the above can be found at https://codereview.stackexchange.com/questions/1658/javascript-code-class-structure