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 属性。 当存在时，它指定表单数据（输入）在提交时不应该被验证。