[RocPoc]

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.

Code:

    submitHandler: function(form) { 
                        var special = /^[TA]{2}([1-13|17|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:

Code:

     $(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}[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}$/.test(value); 
                }, 'Please enter a valid card number');

This is my html code:

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>

[elizas]

Basicallly When we trying to validate a form some time we need numeric validation for textbox.

We can validate textbox by onkeypress event of the control By checking whether the keycode of the key pressed as the user types falls within the range of the number keys 48-57(i.e 0-9 and '.') ,if not belong to that range it will return false then it will disable the keypress action.


Hope this tip is useful.Any suggestions are appreciated.