Email validation of blank not required input

Question

I'm using the latest version of jquery-validation (1.19.0) in the web app based on Laravel (5.7x) and have this issue.

In case of blank (not filled) <input type="email" name="email"> it shows me an error Enter a valid Email. This input is not required, so I need a validation only in case of filling this input. Thanks!

HTML part

<form action="{{ route('posts-listing.store') }}" method="POST" class="m-form m-form--label-align-right" id="m_post_submit">
  <div class="modal-body">
    @csrf
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">Name: <span class="text-danger">*</span></label>
      <div class="col-md-8">
        <input class="form-control m-input" type="text" placeholder="Enter name" name="name" autofocus>
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label" for="phone_country">Phone Number: <span class="text-danger">*</span></label>
      <div class="col-md-8">
        <div class="input-group m-input-group">
          <div class="input-group-prepend">
            <select class="form-control m-bootstrap-select m_selectpicker" name="phone_country" id="phone_country">
                <option value="1" selected title="SK">Slovakia (+421)</option>
                <option data-divider="true"></option>
                <option value="2" title="CZ">Czech (+420)</option>
            </select>
          </div>
          <input type="text" class="form-control" id="m_inputmask_phone" name="phone_number" placeholder="Enter phone number">
        </div>
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">E-mail address:</label>
      <div class="col-md-8">
        <input class="form-control m-input" type="email" placeholder="Enter your email" name="email" autocomplete="off" required="false">
      </div>
    </div>
    <div class="form-group m-form__group row">
      <label class="col-md-4 col-form-label">Note:</label>
      <div class="col-md-8">
        <textarea class="form-control m-input" id="m_autosize_1" rows="3" placeholder="Enter your note..." name="notes"></textarea>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="submit" class="btn crud-submit btn-primary">{{ Auth::user()->hasRole('agent') ? "Add new" : "Send" }}</button>
  </div>
</form>

JavaScript --> this is a part of the whole JS file with other functions

    $('#m_post_submit').validate({
      rules: {
        name: {
          required: true
        },
        phone_number: {
          required: true,
          minlength: 12
        },
        email: {
          required: false
          email: true
        }
      },
      submitHandler: function(form) {
        form.ajaxSubmit({
          type: 'post',
          url: form.attr('action'),
          data: form.serialize(),
          success: function() {
            btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
            location.reload();
          }
        });
        return false;
      }
    });

Answer 1

Oh well, problem was in the main settings of used site template Metronic. There's a validator.addMethod for type="email" by default and looks like this. After removing it works correctly!

/theme/default/src/js/framework/components/plugins/forms/jquery-validation.init.js

jQuery.validator.addMethod("email", function(value, element) {
    if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
        return true;
    } else {
        return false;
    }
}, "Please enter a valid Email.");

Answer 2

You have not properly initialized the jQuery Validate plugin, therefore it seems like HTML5 validation is taking over thanks to the type="email" attribute.

Your code:

$('#m_post_submit').click(function(e) {
    e.preventDefault();
    ....
    form.validate({ ... });
    ....
    form.ajaxSubmit({ ... });
});

1. You should not have .validate() inside of a click event handler. Just call it once on page load and the click will be captured automatically. The .validate() method is primarily used for initialization of the plugin on your form, not for testing validation.

2. The Ajax belongs inside of the submitHandler function of the plugin.

Code should look a lot more like this:

$(document).ready(function() {

    $('#yourform').validate({ // <- initializes plugin
        rules: {
            email: {
                email: true
            }
        },
        submitHandler: function(form) { // <- made for AJAX
            // AJAX goes here
            form.ajaxSubmit({ .... });
            return false;
        }
    });

});

Otherwise, everything seems to be working properly. The email field is only validated when it contains a value:

DEMO: jsfiddle.net/shLx3b65/

---

NOTE: Using type="email" is practically pointless when using the jQuery Validate plugin. This plugin disables all HTML5 validation, and the field behaves no differently than with type="text". It's also pointless as a HTML5 validation "fallback" when JavaScript is disabled since your Ajax will not work without JavaScript anyway.

---

EDIT:

As per updated OP, there is a syntax error:

email: {
    required: false // <- COMMA MISSING HERE
    email: true
}

This syntax error breaks the JavaScript and the HTML5 validation takes over thanks to the type="email" attribute... much like I stated in the very first paragraph of this answer.

Upon adding this missing comma, everything works as expected:

jsfiddle.net/8wxo4cdy/