click event on button is disabling the default behavior of html required

Question

<input name="color" type="radio" data-bind="style: { backgroundImage : 'url('+$parents[1].generateSwatchImage($data)+')'}, checked: $parent.selectedOption, checkedValue: $data ,click : $parents[1].onSelectSwatchAddSlick" required />

<select name="size" required aria-required="true" id = "CC-prodDetails-sku-alphaProduct_size" data-bind="validatableTarget: selectedOption, validationOptions: {decorateElement: false, decorateElementOnModified:  false}, options: optionValues, optionsText: 'key',
                                optionsCaption: $data.optionCaption, value: $data.selectedOption, disable: $parent.disableOptions() || $data.disable, optionsAfterRender: function(option, item) { ko.applyBindingsToNode(option, {disable: !item}, item); },onRender : $parent.AlphaSelector(), event : {change : $parents[1].onSelectDropdownOptionAddSlick}">
                        </select>  

handleAddToCart: function() {
        notifier.clearError(this.WIDGET_ID);
        var variantOptions = this.variantOptionsArray();
        notifier.clearSuccess(this.WIDGET_ID);
        //get the selected options, if all the options are selected.
        var selectedOptions = this.getSelectedSkuOptions(variantOptions);

        var selectedOptionsObj = { 'selectedOptions': selectedOptions };
        
        //adding availabilityDate for product object to show in the edit summary 
        //dropdown for backorder and preorder
        var availabilityDateObj = { 'availabilityDate': this.availabilityDate()};
        var stockStateObj = { 'stockState': this.stockState()};
        

        var newProduct = $.extend(true, {}, this.product().product, selectedOptionsObj, 
                                        availabilityDateObj, stockStateObj);
        
        if(this.selectedSku() && ! this.selectedSku().primaryThumbImageURL){
          this.assignSkuIMage(newProduct, this.selectedSku());
        }
        if (this.variantOptionsArray().length > 0) {
          //assign only the selected sku as child skus
          newProduct.childSKUs = [this.selectedSku()];
        }
        
        newProduct.orderQuantity = parseInt(this.itemQuantity(), 10);
        var itemQuantityInCart = this.itemQuantityInCart(newProduct);
        var stockAvailable = newProduct.orderLimit&&newProduct.orderLimit<this.stockAvailable()?newProduct.orderLimit:this.stockAvailable();
        if ((itemQuantityInCart + parseInt(this.itemQuantity(), 10)) > stockAvailable) {
          var notificationMsg = CCi18n.t('ns.productdetails:resources.totalItemQuantityExceeded', {stockAvailable: stockAvailable, itemQuantityInCart: itemQuantityInCart});
          notifier.sendError(this.WIDGET_ID, notificationMsg, true);
          return;
        }

        $.Topic(pubsub.topicNames.CART_ADD).publishWith(
          newProduct,[{message:"success"}]);

        // To disable Add to cart button for three seconds when it is clicked and enabling again
        this.isAddToCartClicked(true);
        var self = this;
        setTimeout(enableAddToCartButton, 3000);

        function enableAddToCartButton() {
          self.isAddToCartClicked(false);
        };

        if (self.isInDialog()){
          $(".modal").modal("hide");
        }
      },

I am using required in html tags like input and select but the issue is default popover validation of required seems not to be working if i use the click on event on button and if i remove that event the require starts working as expected

could someone help ??

 <div  id="CC-prodDetails-addToCart" data-bind="inTabFlow:(validateAddToCart())" >
                <button type = "submit" class="btn primary full-width cart" data-bind="click: handleAddToCart" >
                
                </button>
            </div>

Answer 1

return true on the basic click event is the key

jsClick = function () {
  console.log('jsClicked');
  return true;
};

function MyViewModel() {
  var self = this;
  
  self.koClick = function () {
    console.log('koClicked');
  };
};

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button onClick="jsClick()" data-bind="click: koClick">click</button>

Answer 2

i think i have solved the issue i have added a data-bind submit on form tag and called the function there so the functionality and html required behavior both are working fine <form id="PDP_Form" data-bind = "submit : $data.handleAddToCart">

Why not just put a click handler on the submit button?

Heading

Instead of using submit on the form, you could use click on the submit button. However, submit has the advantage that it also captures alternative ways to submit the form, such as pressing the enter key while typing into a text box.

**

Parameters

**

• Main parameter

The function you want to bind to the element’s submit event.

You can reference any JavaScript function - it doesn’t have to be a function on your view model. You can reference a function on any object by writing submit: someObject.someFunction.

Functions on your view model are slightly special because you can reference them by name, i.e., you can write submit: doSomething and don’t have to write submit: viewModel.doSomething (though technically that’s also valid).

• Additional parameters

None Notes For information about how to pass additional parameters to your submit handler function, or how to control the this handle when invoking functions that aren’t on your view model, see the notes relating to the click binding. All the notes on that page apply to submit handlers too.