Jquery 验证与 HTML 验证冲突答案

【问题标题】：Jquery validation collide with HTML validationJquery 验证与 HTML 验证冲突
【发布时间】：2021-04-11 23:37:10
【问题描述】：

我想使用内置验证方法（如 required 和 email）对简单表单使用 jquery 验证。

这是我的表格

<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 验证。

这是什么原因？

【问题讨论】：

标签： html jquery validation

【解决方案1】：

拥有required 属性完全没问题。您只需通过向表单元素添加novalidate 属性来告诉浏览器您想跳过默认验证。

novalidate 属性是一个布尔属性。如果存在，它指定提交时不应验证表单数据（输入）。

【讨论】：