У меня есть страница, которая выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Checkbox List Validation Test</title>
<script type="text/javascript" language="JavaScript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="JavaScript" src="jquery.validate.js"></script>
<script type="text/javascript">
jQuery("#formUpdate").validate({
rules: Object.assign({
// TODO: validation rules?
},
messages: {
// TODO: vaidation messages?
}, mandatoryAdditionalFieldRules)
};
</script>
</head>
<body class="colorschemeBackground">
<form id="formUpdate">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" valign="top" class="colorschemeHeader">Pick a box. Its contents will help you on your way. <label id="Notes8Length"></label></td>
</tr>
<tr>
<td width="100%" valign="top" class="colorschemeBackground">
<input class="Notes8" name="Notes8~1" id="Notes8~1" type="checkbox" value="Yes"> Box 1<br>
<input class="Notes8" name="Notes8~2" id="Notes8~2" type="checkbox" value="Yes"> Box 2<br>
<input class="Notes8" name="Notes8~3" id="Notes8~3" type="checkbox" value="Yes"> Box 3<br>
<script type='text/javascript'>
jQuery(function ($) {
function validateMultiple(selector, n, isExactlyN) {
const totChecked = $(selector).filter(':checked').length;
return isExactlyN ? totChecked == n : totChecked >= n;
}
var valid8 = true;
jQuery.validator.addMethod('Notes8',
function (value, element) {
if (!valid8) return true; // only one error message per multilist
valid8 = validateMultiple('.Notes8', 1);
return valid8;
},
'Please check at least one check box.');
});
jQuery('form').validate();
</script>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" valign="top" class="colorschemeHeader">What does the magic 8 ball say? <label id="Notes9Length"></label></td>
</tr>
<tr>
<td width="100%" valign="top" class="colorschemeBackground">
<input class="Notes9" name="Notes9~1" id="Notes9~1" type="checkbox" value="Yes"> Yes<br>
<input class="Notes9" name="Notes9~2" id="Notes9~2" type="checkbox" value="Yes"> No<br>
<input class="Notes9" name="Notes9~3" id="Notes9~3" type="checkbox" value="Yes"> Maybe<br>
<input class="Notes9" name="Notes9~4" id="Notes9~4" type="checkbox" value="Yes"> I don't know<br>
<input class="Notes9" name="Notes9~5" id="Notes9~5" type="checkbox" value="Yes"> Can you repeat the question?<br>
<input class="Notes9" name="Notes9~6" id="Notes9~6" type="checkbox" value="Yes"> You're not the boss of me now!<br>
<input class="Notes9" name="Notes9~7" id="Notes9~7" type="checkbox" value="Yes"> And you're not so big!<br>
<input class="Notes9" name="Notes9~8" id="Notes9~8" type="checkbox" value="Yes"> Life is unfair...<br>
<script type='text/javascript'>
jQuery(function ($) {
function validateMultiple(selector, n, isExactlyN) {
const totChecked = $(selector).filter(':checked').length;
return isExactlyN ? totChecked == n : totChecked >= n;
}
var valid9 = true;
jQuery.validator.addMethod('Notes9',
function (value, element) {
if (!valid9) return true; // only one error message per multilist
valid9 = validateMultiple('.Notes9', 1);
return valid9;
},
'Please check at least one check box.');
});
jQuery('form').validate();
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
<button type="submit">SUBMIT!</button>
</form>
</body>
</html>
Теперь у меня есть два списка флажков, Notes8 и Notes9, каждый со своим собственным классом CSS. Я хочу, чтобы от пользователя требовалось установить хотя бы один флажок из каждого списка. Когда я первоначально отправляю форму без установленных флажков, я получаю предполагаемые сообщения об ошибках. Однако, если я отправляю снова, не устанавливая флажки, он проходит без ошибок! Затем он делает это каждый раз, когда я отправляю - ошибка, проходит, ошибка, проходит, и т. Д. c. Обновление страницы сбрасывает цикл.
Да, я знаю, что код проверки дублирован; это динамически генерируемый код, и размещение функций в нужном месте на странице будет непростым делом ...
Как заставить код проверки работать каждый раз, когда я отправляю форму, а не просто в любое другое время?