I need to display a promotional message when the user clicks submit if
they meet certain criteria about their postcode. I have heard that you
should use the submitHandler but being completely new to JavaScript
and even newer to JQuery I am a little stuck on how I should write
this. I thought it would be something like this but it obviously
doesn't work.

    submitHandler: function(form) {
                        var special = 
/^[T]{1}[A]{1}([1-13|17|19|25]){2}/.test(value);
                        if (special);
                        alert('You have been entered into a competition to win 
a special
prize');
                        form.submit();
                }, // end of submitHandler

I basically need this message to display when they click submit and
then they confirm and the form goes to the server.

This is the code I have so far for the validation:

     $(document).ready(function(){
     $("#orderForm").validate({
                onfocusout: function(element) {
                        this.element(element);
                },
                rules: {
                        firstName: {
                                required: true,
                        },
                        surname: {
                                required: true,
                        },
                        phoneNumber: {
                                required: true,
                        },
                        streetName: {
                                required: true,
                        },
                        city: {
                                required: true,
                        },
                        postalCode: {
                                required: true,
                                shipPostalCode: true,
                        },
                        billEmailAddress: {
                                required: true,
                        },
                        billPhoneNumber: {
                                required: true,
                        },
                        promoCardNumber: {
                                required: true,
                                fidelityCardNumber: true,
                        },
                        billCardNumber: {
                                required: true,
                        },
                        billCardType: {
                                required: true,
                        },
                }, //end of rules
        }); // end of validate
        }); // end of function

$.validator.addMethod('postalCode', function (value) {
                return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
                }, 'Please enter a valid postcode');
$.validator.addMethod('promoCardNumber', 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');

This is my html 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="firstname">First Name</label></td>
          <td><input id="firstName" type="text" name="firstName"
maxlength=
          "30" /></td>
        </tr>
        <tr>
          <td><label for="surname">Surname</label></td>
          <td><input id="surname" type="text" name="surname"
maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="phoneNumber">Contact Telephone Number</
label></td>
          <td><input id="phoneNumber" type="text" name="phoneNumber"
maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="streetName">Street Name</label></td>
          <td><input id="streetName" type="text" name="streetName"
maxlength="30" /></td>
        </tr>
        <tr>
          <td><label for="city">City</label></td>
          <td><input id="city" type="text" name="city" maxlength="30" /
></td>
        </tr>
        <tr>
          <td><label for="postalCode">Post Code</label></td>
          <td><input id="postalCode" type="text" name="postalCode"
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="promoCardNumber">Promotional Card</label></
td>
          <td><input id="promoCardNumber" type="text"
name="promoCardNumber" 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>

Reply via email to