[jQuery] Form validation using the validate plugin

[pocket]

Rather than write my own validation I thought i would use JQuery
instead however i'm not finding this easy either. I have a few
questions which I hope someone can answer. Firstly, the error messages
are only appearing when I click submit. How can I get them to appear
after exiting each field? Here's my code for validation.

Code:
$(document).ready(function(){
    $("#orderForm").validate({
                rules: {
                        shipFirstName: {
                                required: true,
                        },
                        shipFamilyName: {
                                required: true,
                        },
                        shipPhoneNumber: {
                                required: true,
                        },
                        shipStreetName: {
                                required: true,
                        },
                        shipCity: {
                                required: true,
                        },
                        billEmailAddress: {
                                required: true,
                        },
                        billPhoneNumber: {
                                required: true,
                        },
                        billCardNumber: {
                                required: true,
                        },
                        billCardType: {
                                required: true,
                        },
                }, //end of rules
        }); // end of validae
        }); //end of function
This is my HTML code for the form. I won't show the styling but I have
changed it to display a red font.

Code:

<form id="orderForm" method="post" action="x">
      <table id="formTable" cellpadding="5">
        <tr>
          <td>
            <h3>Shipping and Billing Information</h3>
          </td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><label for="shipFirstname">First Name</label></td>
          <td><input id="shipFirstName" type="text"
name="shipFirstName" maxlength=
          "30" /></td>
        </tr>
        <tr>
          <td><label for="shipFamilyName">Surname</label></td>
          <td><input id="shipFamilyName" type="text"
name="shipFamilyName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPhoneNumber">Contact Telephone Number</
label></td>
          <td><input id="shipPhoneNumber" type="text"
name="shipPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipStreetName">Street Name</label></td>
          <td><input id="shipStreetName" type="text"
name="shipStreetName" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipCity">City</label></td>
          <td><input id="shipCity" type="text" name="shipCity"
maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="shipPostalCode">Postal Code</label></td>
          <td><input id="shipPostalCode" type="text"
name="shipPostalCode" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billEmailAddress">Email address</label></td>
          <td><input id="billEmailAddress" type="text"
name="billEmailAddress" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billPhoneNumber">Contact Telephone Number</
label></td>
          <td><input id="billPhoneNumber" type="text"
name="billPhoneNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="fidelityCardNumber">Fidelity card</label></
td>
          <td><input id="fidelityCardNumber" type="text"
name="fidelityCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardNumber">Credit Card Number</label></
td>
          <td><input id="billCardNumber" type="text"
name="billCardNumber" maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="billCardType">Credit Card Type</label></td>
          <td><select id="billCardType" name="billCardType">
            <option value="...">
              Choose your card...
            </option>
            <option value="visa">
              Visa
            </option>
            <option value="mastercard">
              Mastercard
            </option>
          </select></td>
        </tr>
        <tr>
          <td><label for="instructions">Instructions</label></td>
          <td>
          <textarea id="instructions" name="instructions" rows="8"
cols="30">
Enter your requirements here or comments.
</textarea></td>
        </tr>
        <tr>
          <td colspan="2"><input id="submit" type="submit"
name="Submit" value="Submit" </td>
        </tr>
      </table>
    </form>


I also want to use regexs for the postcode and fidelity card. How do I
incorporate these into the script?

Code:
$.validator.addMethod('shipPostalCode', function (value) {
    return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
        }, 'Please enter a valid Postal Code');
        $.validator.addMethod('fidelityCardNumber', function (value) {
    return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}
(\!|\&|\@|\?){1}$/.test(value);
        }, 'Please enter a valid card number');

One final thing. Can this script be put in an external js file easily?
I am trying to get as much out of the html file as possible.

Thanks