Reputation: 15
Hello I have below form to validate. Form has three text box and checkbox i want to validate form like all three text box is not empty and from check box atleast one of them must be selected for enable form submit button I hava tried below jquery but it not valdate form.
<form id="cadandrivit" name="cadandrivit" method="post" action="<?php echo $this->getUrl('revitgallery/index/download')?>">
<ul class="form-list">
<li><label for="firstname" class="required"><em>*</em>Name:</label>
<div class="input-box">
<input name="firstname" id="firstname" title="Contact Name" value="" type="text" class="input-text checkboxfile required-entry" />
</div></li>
<li><label for="company" class="required"><em>*</em>Company Name:</label>
<div class="input-box">
<input name="company" id="company" title="Company Name" value="" type="text" class="input-text checkboxfile required-entry" />
</div></li>
<li><label for="email" class="required"><em>*</em>Email:</label>
<div class="input-box">
<input name="email" id="email" title="E-Mail" value="" type="text" class="input-text checkboxfile required-entry" />
</div></li>
<li class="cf">
<div class="cadrivit_checkbox">
<span><input type="checkbox" value="DoorCavitySliderCriterionIndustriesCascadeArtesian_11089.zip" name="Cascade Sliding Systems - Revit[]">Artesian - Revit</span> <span><input
type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Campaspe_60845.zip" name="Cascade Sliding Systems - Revit[]">Campaspe - Revit</span> <span><input
type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Glacier-Frameless_57288.zip" name="Cascade Sliding Systems - Revit[]">Glacier Frameless - Revit</span>
<span><input type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Oxbow_89345.zip" name="Cascade Sliding Systems - Revit[]">Oxbow - Revit</span> <span><input
type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Tanaro_34537.zip" name="Cascade Sliding Systems - Revit[]">Tanaro - Revit</span> <span><input
type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Amazon_63391.zip" name="Cascade Sliding Systems - Revit[]">Amazon - Revit</span> <span><input
type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Atlantic_79142.zip" name="Cascade Sliding Systems - Revit[]">Atlantic - Revit</span> <span><input
type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Niagara_99081.zip" name="Cascade Sliding Systems - Revit[]">Niagara - Revit</span> <span><input
type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Panama_89704.zip" name="Cascade Sliding Systems - Revit[]">Panama - Revit</span> <span><input
type="checkbox" value="Window-Face-Slider-Criterion-Industries-Cascade-Miami-120_71561.zip" name="Cascade Sliding Systems - Revit[]">Miami - Revit</span>
</div>
</li>
</ul>
<button id="cadandrivitbutton" disabled="true" type="submit" title="Download" class="button">
<span><span>Download</span></span>
</button>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.checkboxfile').keyup(function() {
if ($(this).val().length == 0)
$('#cadandrivitbutton').attr('disabled', true);
})
$('input:checkbox').click(function() {
var buttonsChecked = $('input:checkbox:checked');
if (buttonsChecked.length) {
$('#cadandrivitbutton').removeAttr('disabled');
} else {
$('#cadandrivitbutton').attr('disabled', 'disabled');
}
});
});
</script>
Upvotes: 0
Views: 165
Reputation: 4519
Working for me , EDIT 3 JSFIDDLE
***NOTE : Email validation you need to add*
Try this,
$(function() {
$('.checkboxfile').keyup(function(){
var isCheckedCB = false;
$('input:checkbox').each(function(){
if($(this).is(':checked')){
isCheckedCB = true;
}
});
if( $('#firstname').val()=='' || $('#company').val()=='' || $('#email').val()=='' || !isCheckedCB)
$('#cadandrivitbutton').attr('disabled', true);
else
$('#cadandrivitbutton').attr('disabled', false);
})
$('input:checkbox').click(function() {
var buttonsChecked = $('input:checkbox:checked');
if (buttonsChecked.length && $('#firstname').val()!='' && $('#company').val()!='' && $('#email').val()!='') {
$('#cadandrivitbutton').removeAttr('disabled');
}
else {
$('#cadandrivitbutton').attr('disabled', 'disabled');
}
});
});
Upvotes: 1
Reputation: 994
I would use jQuery to capture the form submission, check the fields you need, and show an alert if the user has to correct something. Returning false from the submit handler will prevent the form from submitting. You can disable buttons, show alerts, whatever you need.
$('#cadandrivit').submit(function() {
if (!condition1 || !condition2) {
alert('warning to user, etc.');
return false;
}
// all good
return true;
})
Upvotes: 0