JQuery-Validate Plugin : My form gets submitted when adding rules to input "file"

Question

I am new to front-end validations, so I was hoping for a little help over here.I am using JQuery Validate Plugin to validate my form before submission. Here is a short sample of my form :

<form method="POST" action="{{ route('employees.store') }}" name="createEmployeeForm" enctype="multipart/form-data">
  <input name="_token" type="hidden" value="{{ csrf_token() }}" />
  <input type="text" id="FirstName" name="FirstName">
  <input type="text" id="LastName" name="LastName">
  <input type="file" id="employee-image" name="employee_image">
  <button id="submit_btn" type="submit">Submit</button>
</form>

I added set of rules to my inputs "FirstName and LastName". When I press on the "Submit" button it validates the form first before submission which is Good, however after I add rules and custom validation method to (input of type "file"), the form is submitted to server-side and no previous validations occurs. Here is my js:

$(document).ready(function() {
      $.validator.addMethod('filesize', function(value, element, param) {
        return this.optional(element) || (element.files[0].size <= param)
      });
      $("form[name='createEmployeeForm']").validate({
          rules: {
            FirstName: "required",
            LastName: "required",
            employee_image: {
              accept: "jpg,png,jpeg,gif",
              filesize: 1048576
            }
          },
          // Specify validation error messages
          messages: {
            employee_image: {
              accept: "uploaded file should have an image-extension : jpg,png,jpeg,gif and less than 1 MB "
            },
            submitHandler: function(form) {
              form.submit();
            }
          });
      });

I tried preventdefault on the submit button and return false in the submit handler, but nothing seems to work out and I don't want to submit my form via ajax. Guidance is appreciated

Did you make sure to include the additional-methods file too? accept method is not part of the core, you also need to include the additional-methods file to get it. Also, messages should not be inside rules, it should be on its own. See jsfiddle.net/Arkni/yasutt29 — Arkni
– Arkni, Commented Aug 22, 2017 at 21:38
Thanks for your comment, It works fine now. I didn't know accept exits in the additional-methods file. As for the messages being inside rules it was a typo when I wrote the snippet.I will update it. Thanks again :) @Arkni — NNMMs
– NNMMs, Commented Aug 23, 2017 at 8:19

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

"accept" method is provided as add-on, that's why additional-method file should be included as mentioned in the Documentation :

Some more methods are provided as add-ons, and are currently included in additional-methods.js in the download package. Not all of them are documented here:

accept – Makes a file upload accept only specified mime-types.
creditcard – Makes the element require a credit card number.
extension – Makes the element require a certain file extension.
phoneUS – Validate for valid US phone number.
require_from_group – Ensures a given number of fields in a group are complete.

Reference : JQuery Validate Documentation

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 6, 2017 at 9:43

NNMMs

236 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery-Validate Plugin : My form gets submitted when adding rules to input "file"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related