StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POusing jquery to validate postal code based on country
text
Body
copied!<p>Working on site where we currently accept US zip codes. I already have jquery validate working for that. What i want to do now is add a drop down for the user to select country, and then based on the country they selected, it will validate the postal code to make sure it matches.</p> <p>Can someone give me some pointers on how i can do this? Basically, i just need to change the regex the validator function is using based on the country drop down. The (what i assume is) relevant section of the jquery validator function is this:</p> <pre><code>(function ($) { $.fn.validate = function (options) { var defaults = { invalidClass: 'error', rules: { req: /.{1,}/g, email: /[\w\.=-]+@[\w\.-]+\.[\w]{2,3}/g, phone: /\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, zip: /\d{5}$|^\d{5}-\d{4}/g, //password: /^(?=.*\d)(?=.*[a-zA-Z]).{8,20}$/g, password: /^(?=.{8,20}$)(?=.*\d)(?=.*[a-zA-Z]).*/g, //nospecialchars: /[^<>?,\/\\\[\]\{\}\|!@#$%^&*()_+;:"]{1,}/g nospecialchars: /^(?!.*[?<>;]).+$/g }, error_messages: { req: 'Oops..', email: 'Please enter your email address.', phone: '', zip: 'Please give me a valid zip.', max: 'too many characters.', password: '', nospecialchars: '' }, success: null, failure: null }, errors = [], opts = $.extend(true, defaults, options); return this.each(function () { var $this = $(this); $(this).find('input[type="submit"]:not(.cancel), button').click(function () { errors = []; validate_fields($this); if ($this.find('.error').length === 0) { if (typeof opts.success == 'function') return opts.success(); } else { if (typeof opts.failure == 'function') return opts.failure(errors); } }); }); </code></pre> <p>I'm not very familiar with jquery so i don't know what the syntax is here for me to create an if-else or case statement to set the regex.</p> <p>Thanks if advance for any help.</p> <p>edit: Here's the bit of code that actually calls the validation</p> <pre><code> <script type="text/javascript"> $(function () { setForm(); $('form').validate({ error_messages: { req: null }, failure: function (errors) { var sel = ''; $(".errMsg").hide(); for (x in errors) { sel += ',#' + errors[x][0]; } if (sel.length > 0) { sel = sel.substring(1); $(sel).parent().find(".errMsg").show(0, function () { $('#home .orange_box, #home .HomeRight').height('auto'); $('#infov .white_box, #infov .orangeRight').height('auto'); $('#findt .orange_box, #findt .HomeRight').height('auto'); if ($.browser.msie && $.browser.version == 8) { evenColumns('#home .orange_box', '#home .HomeRight', -16); evenColumns('#infov .white_box', '#infov .orangeRight', -16); evenColumns('#findt .orange_box', '#findt .HomeRight', -16); } else { evenColumns('#home .orange_box', '#home .HomeRight', -15); evenColumns('#infov .white_box', '#infoforv .orangeRight', -15); evenColumns('#findt .orange_box', '#findt .HomeRight', -15); } }); } return false; }, success: function () { $(".errMsg").hide(); return true; } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload