为什么 "Please fill out this field" 在我单击无关按钮时验证消息显示

Question

我在我的页面上使用了地图，当我点击 'cellSize' 按钮时出现了填写字段警告。我不想这样。如何解决这个问题？

这样的警告：

这是我的文本字段：

<div class="form-group">
    <label for="name">Name</label>
        <input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required>
</div>

这是我的增量按钮点击：

change: function () {
    this.trigger("spin");

    $scope.cellSizeCoefficient = this.value();
    $scope.$broadcast('mapCellSizeChanged', $scope.map);

    $.each($scope.cellShapes, function (index, cellShape) {
        var radius = getRadius(cellShape.Cell);
        cellShape.Circle.setRadius(radius);
        if (cellShape.Circle.label) {
            var labelLoc = findLocationAtDistanceFrom(cellShape.Cell.LOC, cellShape.Cell.AZ, radius);
            cellShape.Circle.label.setLatLng([labelLoc.Y, labelLoc.X]);
        }
    });
    if (selectedCellCircle) {
        var radius = getRadius(selectedCellCircle.Cell) + 50;
        selectedCellCircle.setRadius(radius);
    }
}

Answer 1

如果 HTML 不是必填字段，请从中删除 required 属性，否则浏览器将在表单提交时显示此消息。请确保您没有在单击单元格大小按钮时提交表单。

<input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required>

Answer 2

根据需要添加带有表单标记的 novalidate 属性以便触发 HTML5 验证。

<form novalidate>
<div class="form-group"> <label for="name">Name</label> <input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required> </div>
</form>

Answer 3

由于输入元素上的 required 属性，您看到了这条消息。它在 form 提交时显示，这是在单击 'increment' 按钮时发生的。

要停止该行为，请将 type="button" 属性添加到 button:

<button type="button" style="margin-left:2px;" kendo-button="btnCellSizeIncrement" k-options="btnCellSizeIncrementOptions">
  <i class="fa fa-plus pi-icon pi-icon-plus"></i>
</button>

仅供参考，您应该在您不想提交form的任何button元素上添加type="button"属性他们被点击了。

为什么 "Please fill out this field" 在我单击无关按钮时验证消息显示

Why "Please fill out this field" validate message show when I clicked Irrelevant button

javascript

jquery

validation

required