CODEWITHSUNDEEP
phpjqueryhtml
shubham yadav
shubham yadav

Reputation: 185

input file validation using jquery plugin

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>

Upvotes: 0

Views: 607

Answers (3)

Nirav Joshi
Nirav Joshi

Reputation: 2950

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>

Upvotes: 1

Ayatullah Rahmani
Ayatullah Rahmani

Reputation: 932

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>

Upvotes: 1

Anandhu Nadesh
Anandhu Nadesh

Reputation: 672

try this for file validation

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

Upvotes: 0

Related Questions