Inline Active Javascript Form Validation

I am working on a contact form and need some inline javascript form validation. I already have php validation, but I would like to have some active form validation like at http://t

Solution 1:

Here is a sample form

html

<form id='test'>
Name * <input id="name"type="text"><span id='errName' class='error'>This is a required field</span>
</form>

css

.error{
  display:none;
  color:red;
}

javascript

document.getElementById('test').onsubmit=function(){
  if(document.getElementById('name').value=''){
    document.getElementById('errName').style.display='block';
    returnfalse;
  }
  else{
    returntrue;
  }
}

This is a very simple example and there are different ways to it. For example you could just append an element if there is an error instead of having one hid. Also, you can add another function to check for valid value when there is an onblur event on the input elements.

Solution 2:

In general, you want to make an event handler that is called when the user interacts with the input fields and evaluates the input value to determine which message to show. The appropriate message is displayed and all others are hidden. You can execute simple pattern matching in the browser or use AJAX to send input to the server to evaluate more complex validation, such as if an email is already in use.

The twitter signup form uses a combination of events to trigger the evaluation script. It looks like onclick(or onfocus), onchange, and onblur are all used. The instructions are displayed on click (your ".h-notice" equivalent) and the input is evaluated on blur (element loses focus).

I would use jQuery because you want complex element selection and event handling. You could write plain javascript to accomplish the same effect, but it would require a lot more code. jQuery code for the first name field would look something like this:

<scripttype="text/javascript">jQuery(function($) {
        //hide all the messages
        $('.g-notice, .h-notice, .r-notice').hide();

        //create first name validatorvar fnameValidator = function() {
            var input = $('#fname');
            var notices = input.next('.notices');
            var g = notices.find('.g-notice');
            var h = notices.find('.h-notice');
            var r = notices.find('.r-notice');

            //hide all notices before deciding which to show
            g.hide();
            h.hide();
            r.hide();

            if (input.val() == '') {
                //input field is empty, show the help notice
                h.show();
            } elseif (input.val().match(/[^\w\s]/) === null) {
                //input field is valid, show the good notice
                g.show();
            } else {
                //show required/error message
                r.show();
            }
        };

        //bind event handlers for the first name field
        $('#fname').click(fnameValidator).change(fnameValidator);
    });
</script>

BTW: HTML element IDs should be unique. You can make "helper" a class or make each id different (e.g. "fname-helper-h").