input file validation using jquery plugin

Question

this is my code in this code everything working good but file filed is not validating by this code. all input field is validating by this validation plugin except file type filed.. i think i am missing some thing plz debug it

$("#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"

    },


});

<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>

Where is validate() from? Name your library.

Pete
– Pete

2017-07-03 06:55:22 +00:00
Commented Jul 3, 2017 at 6:55 — Pete
– Pete, Commented Jul 3, 2017 at 6:55

Nirav Joshi · Accepted Answer · 2017-07-03 07:12:57Z

i think you forget to add jquery validate libraby.

Try this snippet hope it will helps you

EDIT

You should add additional-methods.js in your code. Check Now it is working properly

$("#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>

@shubhamyadav But it is working properly. which error you get?
i m not getting any error when i click on submit buttun form is submitted even if no file is selected
@shubhamyadav answer edited Please check now. I think you also forget to add additional-methods.js file
@shubhamyadav did my answer helps you? Please give feedback. and Please accept it if it is helpful to you. that will also helps me too. :)

Ayatullah Rahmani · Accepted Answer · 2017-07-03 07:02:15Z

check snippet .its working

include external jquery.validate.js also do not forgot to add jquery libray

$("#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"

    },


});

<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>

thank there were no prblm there were only my designing isssue btw thanks guys to help me

Anandhu Nadesh · Accepted Answer · 2017-07-03 07:00:29Z

0

try this for file validation

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

answered Jul 3, 2017 at 7:00

Anandhu Nadesh

6722 gold badges11 silver badges21 bronze badges

3 Comments

Nirav Joshi Over a year ago

i think there is a only one input file type so need to do each loop

shubham yadav Over a year ago

how i can do this?

Anandhu Nadesh Over a year ago

Add it in an if loop inside your validate function

Collectives™ on Stack Overflow

input file validation using jquery plugin

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related