Jquery 驗證與 HTML 驗證相沖突

Question

我想使用 jquery 驗證簡單表單，使用內置驗證方法，如 required 和 email。

這是我的表格

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

在 javascript 中，我像這樣啟動 jquery 驗證。

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

但是當我嘗試它時，它顯示像這樣的 HTML 驗證

當我為電話填寫無效輸入（這是第三個輸入）時，似乎 jquery 驗證工作正常。 當我嘗試為第一個輸入填充空白輸入時，錯誤消息來自像這樣的 jquery 驗證。

這是什么原因？

Answer 1

擁有required屬性是完全可以的。 您只需通過向表單元素添加novalidate屬性來告訴瀏覽器您要跳過默認驗證。

novalidate 屬性是 boolean 屬性。 當存在時，它指定表單數據（輸入）在提交時不應該被驗證。