Inline Active Javascript Form Validation

Question

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://twitter.com/signup. I would like it to show and hide the p tags after the input. Here is my html code.

<form class="contact" method="POST" enctype="multipart/form-data" action="validate.php">


  <label for="fname">First Name*<br /></label>
  <input type="text" id="fname" style="font-family: Gochi Hand;" name="fname" placeholder="First" autofocus required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">First Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A First Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your First Name.</p>
    </div>
  <br /><br />

  <label for="lname">Last Name*<br /></label>
  <input type="text" id="lname" style="font-family: Gochi Hand;" name="lname" placeholder="Last" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice" style="color:green; ">Last Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Last Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Last Name.</p>
    </div>

  <br /><br />

  <label for="email">Email Address*<br /></label>
  <input type="email" name="email" style="font-family: Gochi Hand;" id="email" placeholder="[e-mail]" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Email Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Email is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Email.</p>
    </div>

  <br /><br />

  <label for="url">Website<br /></label>
  <input type="url" name="url" id="url" style="font-family: Gochi Hand;" placeholder="http://website.com"  pattern="^(http|https)://.+(.[a-zA-Z])$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">URL Looks Good.</p> 
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your URL.</p>
    </div>

  <br /><br />


  <label for="age">Age*<br /></label>
  <input type="text" size="3" id="age" name="age" style="font-family: Gochi Hand;" required class="age" required placeholder="Age" pattern="^\d+$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Age Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">An Age is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Age.</p>
    </div>

  <br /><br />

  <label for="comments">Comments*<br /></label>
  <textarea style="font-family: Gochi Hand;" required id="comments" name="comments" cols="30" rows="10"></textarea>

  <br /><br />

  <input type="hidden" value="True" name="go" id="go" />

  <input style="color:red;" type="submit" class="submit" value="Send!" />
  </form>

any suggestions or help would be worth a ton.

Answer 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';
    return false;
  }
  else{
    return true;
  }
}

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.

Answer 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:

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

        //create first name validator
        var 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();
            } else if (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").