This is my first script in Object Oriented Javascript (jQuery 1.5.2). It's 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:

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:

This is my first script in Object Oriented Javascript (jQuery). It's 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.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
 
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 > 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

</script>

<script type="text/javascript">
     $(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);
                 }
            });
     });
</script>

<style type="text/css">
     .invalid { border: 2px solid red; }
</style>
 

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

This is my first script in Object Oriented Javascript (jQuery 1.5.2). It's 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.

<script type="text/javascript">
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 > 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

</script>

<script type="text/javascript">
     $(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);
                 }
            });
     });
</script>

<style type="text/css">
     .invalid { border: 2px solid red; }
</style>

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

Contents of script.php

<?php

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

?>