#javascript #html #jquery #forms
#язык JavaScript #HTML #jquery #формы
Вопрос:
Я могу вернуть ошибку проверки (HTML5), используя следующий скрипт, но теперь я не знаю, как «если/иначе, если» в зависимости от страны.
Цель Javascript/Jquery для проверки почтового индекса на основе выбора страны до отправки формы с использованием шаблонов проверки (99999 или A9A 9A9).
Если посетитель выберет НАС, установите шаблон для 99999. В противном случае, если вы выберете Канаду, установите шаблон для 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'); }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;formgt; lt;p class="country"gt; lt;label class="field-label" for="13037"gt;Countrylt;/labelgt; lt;select name="13037" id="13037" class="select" onchange=""gt; lt;option value="" selected="selected"gt;lt;/optiongt; lt;option value="47917"gt;USlt;/optiongt; lt;option value="47919"gt;Canadalt;/optiongt; lt;/selectgt; lt;/pgt; lt;p class="form-field group-contact col3 row3 form-row-half-sm zip pd-text required "gt; lt;label class="field-label" for="13001"gt;Zip Codelt;/labelgt; lt;input type="text" name="13001" id="13001" value="" class="text" size="30" maxlength="32" onchange="" onfocus=""gt; lt;/pgt; lt;buttongt;Submitlt;/buttongt; lt;/formgt; Ответ №1:
Вы хотите добавлять сброс валидатора каждый раз при изменении параметра «Выбор». Что-то вроде:
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(); Комментарии:
1. спасибо, что посмотрели на это. К сожалению, если посетитель не соответствует правилу проверки, он не сбрасывается. Только после того, как я обновлю страницу, она примет правильное значение.
Ответ №2:
У меня есть надежное решение на случай, если это кому-нибудь поможет
// 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 amp;amp; match) { $(this).removeClass('invalid'); } else if (!zipValue) { $(this).removeClass('invalid'); } else { $(this).parent().append('lt;span id="notify" class="error no-label text"gt;' zipErrorMessage 'lt;/spangt;'); $(this).addClass('invalid'); } }).change(); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;formgt; lt;p class="country"gt; lt;label class="field-label" for="13037"gt;Countrylt;/labelgt; lt;select name="13037" id="13037" class="select" onchange=""gt; lt;option value="" selected="selected"gt;lt;/optiongt; lt;option value="47917"gt;USlt;/optiongt; lt;option value="47919"gt;Canadalt;/optiongt; lt;/selectgt; lt;/pgt; lt;p class="form-field group-contact col3 row3 form-row-half-sm zip pd-text required "gt; lt;label class="field-label" for="13001"gt;Zip Codelt;/labelgt; lt;input type="text" name="13001" id="13001" value="" class="text" size="30" maxlength="32" onchange="" onfocus=""gt; lt;/pgt; lt;buttongt;Submitlt;/buttongt; lt;/formgt; ещё.