为什么“请填写此字段”验证消息显示当我点击无关按钮

问题描述：

我在我的页面上使用了地图，当我点击'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); 
    } 
}

由于'input'元素上的'required'属性，您将看到该消息。当表单提交时显示，所以我猜你需要在'增加按钮'上放置'type =“按钮'' –

我用kendo按钮和我的按钮代码是这样的： '''' 。任何想法@RoryMcCrossan – eagle

是的，你需要添加'type =“button'来解决这个问题。我将它添加为你的答案 –

答

你看到的消息，由于输入元素上required属性。当单击“增量”按钮时发生form提交时显示。

要停止行为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>

仅供参考，您应添加type="button"属性上的任何button元素，你不要提交的form当他们点击。

非常感谢@RoryMcCrossan。（顺便说我是一个女孩（不是他，她:)）） – eagle

很高兴提供帮助。如果我暗示你是某个地方的人，请道歉！ –

答

从这个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>

在'input'有'required'属性是一件非常正常的事情需要解决的问题是为什么当点击“增量”按钮时出现 –

我认为他想保持字段的必要，但删除消息，我可能不知道 – Minirock

@RoryMcCrossan正如我所说的可能是一个表单正在被提交，所以他需要将它设置为'button'而不是'' – Niladri

答

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

如果你来到文本中，我想看到这个消息，但我不想看到这个消息，如果我点击增量按钮。如果我添加'novalidate'，我永远不会看到警告消息。 @HaRdikKaji – eagle

为什么“请填写此字段”验证消息显示当我点击无关按钮

相关推荐