我如何使用jQuery验证选择选项?

时间:2020-08-17 10:03:17

标签: jquery validation select

这是我用于多步骤验证文本框的脚本。很好。

但是当我单击下一步按钮时检查下拉选项时,它不起作用;如何验证多种表单提交中的下拉框

HTML代码应适用于多页表单。现在,我仅以单步形式提供它。

    $(document).ready(function () {
    
        var navListItems = $('div.setup-panel div a'),
                allWells = $('.setup-content'),
                allNextBtn = $('.nextBtn');
    
        // allWells.hide();
    
        navListItems.click(function (e) {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                    $item = $(this);
    
            if (!$item.hasClass('disabled')) {
                navListItems.removeClass('btn-primary').addClass('btn-default');
                $item.addClass('btn-primary');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });
    
        allNextBtn.click(function(){
            var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='date'],input[type='url']"),
                isValid = true;
    
            $(".form-group").removeClass("has-error");
            for(var i=0; i<curInputs.length; i++){
                if (!curInputs[i].validity.valid){
                    isValid = false;
                    $(curInputs[i]).closest(".form-group").addClass("has-error");
                }
            }
    
            if (isValid)
                nextStepWizard.removeAttr('disabled').trigger('click');
        });
    
        $('div.setup-panel div a.btn-primary').trigger('click');
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form"method="POST" action="" id="import_csv" enctype="multipart/form-data">
        <div class="row setup-content" id="step-1">
            <div class="col-xs-12">
                <div class="col-md-12">
                    
            <div class="form-row">
            <div class="form-group col-md-12">
          <label for="inputZip"> <span class="text-danger">*</span>Shipping mode</label>
          <select id="inputState" class="form-control" name="mode" required>
            <option value=""  >Please Select</option>
            <option value="Commercial address">Air</option>
            <option value="Residential address">Surface (Road/Rail/Sea)</option>
            <option value="Sea Port">Multimodel</option>
          </select>
        </div>
    
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputState"><span class="text-danger">*</span>Departure country</label>
         <select name="country"  id="country" class="form-control select2" required>
                                    
                                    <option value="">select country</option>
                                    <?php 
                                    foreach($all_countries as $country)
                                    {
                                        $selected = ($country['country_name'] == $this->input->post('country')) ? ' selected="selected"' : "";
    
                                        echo '<option  value="'.$country['country_name'].'" '.$selected.'>'.$country['country_name'].'</option>';
                                    } 
                                    ?>
                                    
                                </select>
        </div>
        <div class="form-group col-md-4">
          <label for="inputCity"><span class="text-danger">*</span>Departure district</label>
         <input type="text" class="form-control" id="inputCity" name="dist" placeholder="Type City or District" value="<?php echo $this->input->post('dist'); ?>" required>
        </div>
        <div class="form-group col-md-4">
          <label for="inputZip"><span class="text-danger">*</span>Departure type</label>
          <select id="inputState" class="form-control" name="dept" required>
            <option value=""  >Please Select</option>
            <option value="Commercial address">Commercial address</option>
            <option value="Residential address">Residential address</option>
            <option value="Sea Port">Sea Port</option>
            <option value="Airport">Airport</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputCity"><span class="text-danger">*</span>Arrival country </label>
          <select name="country1" class="form-control select2" required>
                                    
                                    <option value="">select country</option>
                                    <?php 
                                    foreach($all_countries as $country)
                                    {
                                        $selected = ($country['country_name'] == $this->input->post('country1')) ? ' selected="selected"' : "";
    
                                        echo '<option  value="'.$country['country_name'].'" '.$selected.'>'.$country['country_name'].'</option>';
                                    } 
                                    ?>
                                    
                                </select>
    </select>
        </div>
        <div class="form-group col-md-4">
          <label for="inputState"><span class="text-danger">*</span>Arrival district</label>
         <input type="text" class="form-control" id="inputCity" name="dist1" placeholder="Type City or District" value="<?php echo $this->input->post('dist1'); ?>" required>
            
        </div>
        <div class="form-group col-md-4">
          <label><span class="text-danger">*</span>Arrival type</label>
           <select id="Arrival-type" class="form-control select" name="Arrival-type" required>
            <option value="" >Please Select</option>
            <option value="Commercial address">Commercial address</option>
            <option value="Residential address">Residential address</option>
            <option value="Sea Port">Sea Port</option>
            <option value="Airport">Airport</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputState"><span class="text-danger">*</span>Select arrival date</label>
      <input class="form-control " type="date" name="date"  id="datepicker" value="<?php echo $this->input->post('date'); ?>" required >
        </div>
        <div class="form-group col-md-8">
          <label for="inputZip"><span class="text-danger">*</span>What is the cargo?</label>
          <input type="text" class="form-control" id="inputZip" placeholder="Describe the cargo" name="cargo" value="<?php echo $this->input->post('cargo'); ?>" required>
        </div>
      </div>
      
      
            <div class="form-group col-md-8">
                    
            <button class="btn btn-signup nextBtn btn-lg" type="button" >Next</button>
                            </div>
                <br>
                <br>
                </div>
            </div>
        </div>
        </div>

0 个答案:

没有答案