Question

我有一个表格，其中有三个选择选项，company_one，company_two，company_three，每个选项都有一个字段，该字段最初是隐藏的，但是当我选择公司一时，将显示一个字段，而当我选择公司二时，将显示一个字段。公司2显示，公司3相同，在company_one字段中有一个输入类型文件，公司2和3相同，我要验证是否选择了jpg / png / jpeg以外的文件，那么应该输入一条消息选择一个正确的文件，并且对于每个选项字段都相同，我已经尝试过，但是验证不起作用。

    <!DOCTYPE html>
<html>
<head>
    <title>test7</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form method="post">
    <select class="form-control" id="next" name="type_of_org" onclick="getStatus(this.value)" required>
        <option value="">Select</option>
        <option value="company_one">company_one</option>
        <option value="company_two">company_two</option>
        <option value="company_three">company_three</option>
    </select>
        <div class="row">
        <div id="type1" class="type_of_org" style="display:none">
    <div class="col-md-4">
        <label for="company_one">company_one</label>
        <input type="file"  class="form-control" id="ph1" name="company_one_pic">
        <span id="pro1"></span>

    </div>      
</div>
<div id="type2" class="type_of_org" style="display:none"> 
<div class="col-md-3">
        <label for="company_two">company_two</label>
        <input type="file"  name="company_two_pic" id="ph2" class="form-control">
        <span id="pro2"></span>
    </div>
</div>
     <div id="type3" class="type_of_org" style="display:none">
        <div class="col-md-4">
        <label for="company_three">company_three</label>
        <input type="file" class="form-control"  id="ph3" name="company_three_pic">
    <span id="pro3"></span>
    </div>
     </div>
     </div>
     <div class="row">
     <div class="col-md-4">
        <button type="submit" name="submit" id="submit">Submit</button>
     </div>
 </div>
    </form>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script >
 function getStatus(a){

    if($("#next").val()=="company_one"){
      $('#type1').css('display','block');
      $('#type2').css('display','none');
      $('#type3').css('display','none');

    }
    if($("#next").val()=="company_two"){
      $('#type1').css('display','none');
      $('#type2').css('display','block');
      $('#type3').css('display','none');
    }

     if($("#next").val()=="company_three"){
      $('#type1').css('display','none');
      $('#type2').css('display','none');
      $('#type3').css('display','block');
    }
}
</script>

<script>
    $(document).ready(function(){

        $("form").submit(function(){
            var file = $("input:file"); 

                 if($("#next").val()=="company_one"){

                if ($('#ph1').get(0).files.length === 0) {

                 alert("Please select company one file .");
                 return false;
                    }
                }

                if($("#next").val()=="company_two"){
                    if ($('#ph2').get(0).files.length === 0) {

                 alert("Please select company two file .");
                 return false;
                    }
                }
                if($("#next").val()=="company_three"){

                    if ($('#ph3').get(0).files.length === 0) {

                 alert("Please select company three file .");
                 return false;

                    }
                }   
                if($("#next").val()=="343re"){

                    if ($('#ph3').get(0).files.length === 0) {

                 alert("Please select company 343 file .");
                 return false;

                    }
                }   



             else{
                alert('everything is okay');
             }


        });

    });
</script>
</body>
</html>

为什么使用js jquery上传文件时验证在提交时不起作用？

0 个答案: