javascriptjqueryvalidationrequired

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


I used map on my page and when I clicked 'cellSize' button Fill the fields warning appeared. I dont want to this. How can fix this ?

Warning like this : enter image description here

this is my text field :

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

and this is my increment button click :

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);
    }
}

Solution

  • You're seeing the message due to the required attribute on the input element. It's shown when the form is submit which is happening when the 'increment' button is clicked.

    To stop that behaviour add a type="button" attribute to the 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>
    

    Just FYI, you should add the type="button" attribute on any button elements that you do not want to submit the form when they are clicked.