Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validation Plugin - Using submitHandler

    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 submitHandlerI 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>

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Code:
    var special = /^[TA]{2}([1-13|17|25]){2}/.test(value);
    Whereabouts is the value of the variable called "value" set?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •