Jquery validation collide with HTML validation

Question

I want to use jquery validation for simple form using built-in validation method like required and email.

Here is my form

<form id="setup-company" class="form-horizontal form-rest validator" action="{{$updatePath}}">
    <div class="form-group">
        <label for="name" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Nama Institusi *</label>
        <div class="col-sm-12">
            <input type="text" class="form-control" name="name" value="{{$company->name}}" style="width: 100%;" required>
        </div>
    </div>
    <div class="form-group">
        <label for="abbreviation" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Singkatan</label>
        <div class="col-sm-12">
            <input type="text" class="form-control" name="abbreviation" value="{{$company->abbreviation}}" style="width: 100%;">
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">No. Telp</label>
        <div class="col-sm-12">
            <input type="number" class="form-control" minlength="10" maxlength="12" name="phone" value="{{$company->phone}}">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-6 control-label" style="font-size: 12px;text-transform:uppercase">Email</label>
        <div class="col-sm-12">
            <input type="email" class="form-control" name="email" value="{{$company->email}}">
        </div>
    </div>
    <button style="float:right;" type="submit" class="btn btn-sm btn-success btn-raised rippler rippler-inverse edit-row">
        SIMPAN
    </button>
</form>

In the javascript, I initiate jquery validation like this.

 $('.form-rest').unbind().submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        // check if the input is valid
        if (!$form.valid())
            return false;
});

But when I try it, it shows HTML validation like this

When I fill invalid input for phone (which is third input), it seems jquery validation working properly. And when I try to fill blank input for first input, the error message came from jquery validation like this.

Whats the cause of this?

Answer 1

It's totally fine to have the required attribute. You just have to tell the browser that you want to skip the default validation by adding the novalidate attribute to the form element.

The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.