У меня есть простая форма html, в которую я добавил проверку на использование плагина JQuery Validation. У меня он работает для отдельных полей, для которых требуется значение. Теперь мне нужно расширить это, чтобы, если пользователь отвечает на вопрос "Да", он должен ввести что-то в поле "Сведения", иначе поле "Детали" может быть оставлено пустым. Я использую переключатели для отображения Да/Нет. Здесь моя полная html-форма - я не уверен, куда идти отсюда:
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
В ваших <textarea> элементах добавьте выражение для required, например, для вопроса 1, сделайте следующее:
validate="required:'input[name=Question1][value=Yes]:checked'"
Это говорит, что если $('input[name=Question1][value=Yes]:checked').length > 0, тогда требуется поле, поэтому, если "Да" отмечен, ему необходимо:)
Вы можете сделать что-то вроде этого:
$("#editRecord").validate({
rules: {
'Details1': {
required: function() {
return $('input[name=Question1]').val() == 'yes';
}
}
'Details2': {
required: function() {
return $('input[name=Question2]').val() == 'yes';
}
}
}
});
В ответ на предложенный выше ответ Nick Craver я нашел правильный синтаксис:
class= "проверить [требуется] [имя = Question1] [value = Да]: проверено"
вместо того, что он опубликовал.
Спасибо, что поставил меня на правильный путь!