CODEWITHSUNDEEP
javascriptjquery
magelearner
magelearner

Reputation: 15

Disable form submit button untill required field is not populated

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

Answers (2)

Dimag Kharab
Dimag Kharab

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

Keith
Keith

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

Related Questions