Мне нужно было, чтобы определенные поля были «обязательными», поэтому я использовал jquery.validate.js и class="required" и т.д.
Единственная проблема заключается в том, что я расширил форму, когда в раскрывающемся списке выбран определенный параметр, сделав скрытый div видимым, используя: Display: None, а затем Display: Block.
Одно из полей в расширенном div должно быть обязательным полем, но если я установлю его как class="required". Для проверки все равно потребуется значение из этого поля, даже если оно скрыто и не требуется.
Итак, мне нужно, чтобы class="required" добавлялся или удалялся или переключался при изменении отслеживаемого ввода выбора, который постоянно появляется в форме.
Вот как я пытался его закодировать, но, похоже, он не работает. Большое спасибо всем, кто может помочь, и я надеюсь, что понял смысл своего объяснения.
Этот первый бит расширяет форму, отображая скрытый элемент div при выборе параметров раскрывающегося списка.
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
}
// ]]>
</script>
// This is how I have tried to add & remove the required class.
<script type="text/javascript">
$('#category').change(function(){
if ( $('#category').val() =='id1' ) {
$('#size').addClass('required');
} else {
$('#size').removeClass('required');
}
}
</script>
<html>
<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">
<select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');">
<option value="">- please select -</option>
<option value="id1">Category1</option>
<option value="id2">Category2</option>
<option value="id3">Category3</option>
</select>
<div id="id1">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
</form>
</html>
