Puedo devolver un error de validación (HTML5) usando la siguiente secuencia de comandos, pero ahora no sé cómo "si / si no" según el país.
Meta Javascript/Jquery para validar el código postal en función de la selección del país antes de enviar el formulario utilizando los patrones de validación (99999 o A9A 9A9).
Si el visitante elige EE. UU., configure el patrón para 99999. De lo contrario, si elige Canadá, configure el patrón para A9A 9A9.
$('p.zip').each(function() { $(this).find("input").prop('pattern', '\d{5}(?:-\d{4})?|[a-zA-Z]\d[a-zA-Z] ?\d[a-zA-Z]\d'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <p class="country"> <label class="field-label" for="13037">Country</label> <select name="13037" id="13037" class="select" onchange=""> <option value="" selected="selected"></option> <option value="47917">US</option> <option value="47919">Canada</option> </select> </p> <p class="form-field group-contact col3 row3 form-row-half-sm zip pd-text required "> <label class="field-label" for="13001">Zip Code</label> <input type="text" name="13001" id="13001" value="" class="text" size="30" maxlength="32" onchange="" onfocus=""> </p> <button>Submit</button> </form>Desea agregar restablecer su validador cada vez que cambie la opción de selección. Algo como:
function countryChanged() { var countryId = $( this ).val(); var regexExp = '\d{5}(?:-\d{4})?|[a-zA-Z]\d[a-zA-Z] ?\d[a-zA-Z]\d'; switch(countryId) { case '47919' : regexExp = 'regex for CANADA here'; break; } changeValidator(regexExp); } function changeValidator(regexExp) { $('p.zip').each(function() { $(this).find("input").prop('pattern', regexExp); }); } $( "#13037" ).change(countryChanged); countryChanged();Tengo una solución sólida en caso de que esto ayude a alguien.
// var zipPlaceholderFormat = 'xxxxx'; //default to US placeholder format var zipPattern = /^[0-9]{5}$/; //default to US regex format var zipErrorMessage = 'Please enter a valid zip code' // by default, set the country to US if ($('p.country select').val() === '') { $('p.country select').val($('p.country select option:contains("US")').val()); } $('p.country select').change(function() { // zipPlaceholderFormat = 'xxxxx'; //default to US placeholder format zipPattern = /^[0-9]{5}$/; //default to US regex format zipErrorMessage = 'Please enter a valid zip code' switch ($(this).find('option:selected').text()) { case 'Canada': // zipPlaceholderFormat = 'A9A 9A9' zipPattern = /^[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]$/; zipErrorMessage = 'Please enter a valid postal code'; $('p.Province_Canada select').change(); break; default: // US $('p.state select').change(); } // $('p.zip input').each(function() { // $(this).prop('placeholder', zipPlaceholderFormat); // }); }).change(); // checks the zip/postal code based on value provided by visitor $('p.zip input').change(function(event) { var zipValue = $(this).val(); //get the current value from form var match = zipValue.match(zipPattern) $('p.zip span.error').remove(); if (zipValue && match) { $(this).removeClass('invalid'); } else if (!zipValue) { $(this).removeClass('invalid'); } else { $(this).parent().append('<span id="notify" class="error no-label text">' + zipErrorMessage + '</span>'); $(this).addClass('invalid'); } }).change(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <p class="country"> <label class="field-label" for="13037">Country</label> <select name="13037" id="13037" class="select" onchange=""> <option value="" selected="selected"></option> <option value="47917">US</option> <option value="47919">Canada</option> </select> </p> <p class="form-field group-contact col3 row3 form-row-half-sm zip pd-text required "> <label class="field-label" for="13001">Zip Code</label> <input type="text" name="13001" id="13001" value="" class="text" size="30" maxlength="32" onchange="" onfocus=""> </p> <button>Submit</button> </form>más.