使用jquery插件进行输入文件验证

Question

这是我在此代码中的代码一切正常但文件归档未通过此代码验证。 所有输入字段都是通过此验证插件验证，除了文件类型提交..我想我错过了一些事情plz调试它

＆＃13;

＆＃13;

$("#contactus_form").validate({

    // Specify the validation rules
    rules: {
        name: "required",
        contact: {
          required:true,
          maxlength: 10,
            minlength: 10,
          digits: true

        },
        degree: "required",
        applying_for: "required",
        experience: {
          required:true,
          //  maxlength: 10,
          digits: true

        },
        user_cv: {
          //check:"required",
      required: true,
      extension: "doc|pdf"
    },
        email: {
            required: true,
            email: true
        }


    },

    // Specify the validation error messages
    messages: {
        name: "Please enter your first name",
        contact: "Please enter your contact number",
        degree: "Please enter your Qualification",
        experience: "Please enter your experience",
        user_cv: "Please select Your Cv",
        applying_for: "Please accept our policy",
        email: "Please enter a valid email address"

    },


});

＆＃13;

<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data">
            <div class="form-group">
              <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'">
            </div>
            <div class="form-group">
              <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'">
            </div>
            <div class="form-group">
              <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'">
            </div>
            <div class="form-group">
            <!--   <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'">
          -->
             <select id="degree" name="degree"   class="form-control">
               <option value="">Not selected </option>
                <option value="Graduation ">Graduation </option>
                  <option value="Post Graduation">Post Graduation  </option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'">
            </div>
            <div class="form-group">
              <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'">
            </div>
            <div class="form-group">
              <div class="field">
                <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" />
                <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span>
                  <strong class="browse-btn butn">Browse</strong></label>
              </div>

             </div>
            <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button>
          </form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查代码段。工作

  

包括外部jquery.validate.js也不要忘记添加jquery libray

＆＃13;

＆＃13;

$("#contactus_form").validate({

    // Specify the validation rules
    rules: {
        name: "required",
        contact: {
          required:true,
          maxlength: 10,
            minlength: 10,
          digits: true

        },
        degree: "required",
        applying_for: "required",
        experience: {
          required:true,
          //  maxlength: 10,
          digits: true

        },
        user_cv: {
          //check:"required",
      required: true,
      extension: "doc|pdf"
    },
        email: {
            required: true,
            email: true
        }


    },

    // Specify the validation error messages
    messages: {
        name: "Please enter your first name",
        contact: "Please enter your contact number",
        degree: "Please enter your Qualification",
        experience: "Please enter your experience",
        user_cv: "Please select Your Cv",
        applying_for: "Please accept our policy",
        email: "Please enter a valid email address"

    },


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data">
            <div class="form-group">
              <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'">
            </div>
            <div class="form-group">
              <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'">
            </div>
            <div class="form-group">
              <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'">
            </div>
            <div class="form-group">
            <!--   <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'">
          -->
             <select id="degree" name="degree"   class="form-control">
               <option value="">Not selected </option>
                <option value="Graduation ">Graduation </option>
                  <option value="Post Graduation">Post Graduation  </option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'">
            </div>
            <div class="form-group">
              <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'">
            </div>
            <div class="form-group">
              <div class="field">
                <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" />
                <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span>
                  <strong class="browse-btn butn">Browse</strong></label>
              </div>

             </div>
            <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button>
          </form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想你忘了添加jquery validate libraby。

试试这段代码希望它会帮助你

修改

您应该在代码中添加additional-methods.js。立即检查它是否正常工作

$("#contactus_form").validate({

    // Specify the validation rules
    rules: {
        name: "required",
        contact: {
          required:true,
          maxlength: 10,
            minlength: 10,
          digits: true

        },
        degree: "required",
        applying_for: "required",
        experience: {
          required:true,
          //  maxlength: 10,
          digits: true

        },
        user_cv: {
         required: true,
         extension: "doc|pdf"
       },
        email: {
            required: true,
            email: true
        }
    },

    // Specify the validation error messages
    messages: {
        name: "Please enter your first name",
        contact: "Please enter your contact number",
        degree: "Please enter your Qualification",
        experience: "Please enter your experience",
        user_cv: "Please select Your Cv",
        applying_for: "Please accept our policy",
        email: "Please enter a valid email address"

    },


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.js"></script>
<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data">
            <div class="form-group">
              <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'">
            </div>
            <div class="form-group">
              <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'">
            </div>
            <div class="form-group">
              <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'">
            </div>
            <div class="form-group">
            <!--   <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'">
          -->
             <select id="degree" name="degree"   class="form-control">
               <option value="">Not selected </option>
                <option value="Graduation ">Graduation </option>
                  <option value="Post Graduation">Post Graduation  </option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'">
            </div>
            <div class="form-group">
              <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'">
            </div>
            <div class="form-group">
              <div class="field">
                <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" />
                <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span>
                  <strong class="browse-btn butn">Browse</strong></label>
              </div>

             </div>
            <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button>
          </form>

Answer 3

尝试进行文件验证

$('input[name^="fileupload"]').each(function () {
    $(this).rules('add', {
        required: true,
        extension: "doc|pdf"
    })
})