I am attempting to implement form validation with the following code:
However, it does not seem to be working properly.
<form name="niceform" id="third" action="" class="niceform" method="post" enctype="multipart/form-data">
<div class="titlu_form"> category: </div>
<div class="option_form">
<select name="category" id="category" class="validate['required']">
<option value=""> -- Choose a category -- </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
</div>
<div class="titlu_form"> province: </div>
<div class="option_form">
<select name="province" class="validate['required']">
<option value=""> -- Province -- </option>
<option value="Castellon"> Castellon </option>
<option value="Valencia"> Valencia </option>
</select>
</div>
<div class="titlu_form"> brand: </div>
<div class="option_form">
<select name="brand" id="brand" class="validate['required']">
<option value=""> -- Brand -- </option>
<option value="jeans"> jeans </option>
<option value="other"> other </option>
</select>
</div>
<input type="submit" name="Submit" />
</form>
This is the JavaScript code I am using for validation:
<script type="text/javascript" src="lightform/mootools.js"></script>
<script type="text/javascript" src="lightform/formcheck.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
formcheck = new FormCheck('third', {
display : {
fadeDuration : 500,
errorsLocation : 1,
indicateErrors : 1,
showErrors : 1
}
})
//$('brand').removeAttribute('class');
formcheck.dispose($('brand'));
});
$('category').addEvent('change', function(event){
var selection = document.getElementById('category').value;
alert(selection);
if(selection == 1) {
alert(selection);
formcheck.dispose($('brand'));
$('brand').removeAttribute('class');
}
});
</script>
Unfortunately, I encountered the following error message:
formcheck.dispose is not defined.
I am looking to hide the "brand" div when selecting option 2 or 3. Can you provide any insights on how to achieve this?