When closing a bootstrap modal, the unobtrusive Jquery validation triggers unnecessarily

Question

By clicking the Close button of the Modal window, the validation is firing and it does not close. Then, if I give another click, then yes, the modal window is closed. I confess that I am bothered by this... I already tried to disable the validations the moment I click the Close button, but it’s not working... Does anyone know how to solve this?

JS:

$("#btn-fechar-criar-parcelas").on("click", function (e) {
    e.preventDefault();
    
    $("#frmCriarParcelasAutomaticamente").validate().settings.ignore = "*";
    $('#modalCriarParcelaAutomaticamente').modal('hide');
});

BUTTON:

 <button id="btn-fechar-criar-parcelas" class="btn btn-danger"><i class="icon wb-close"></i> Fechar </button>

VIEWMODEL:

[Display(Name = "Quantidade de Parcelas")]
[Range(1, 999, ErrorMessage = "A {0} deve estar entre {1} e {2}.")]
[Required(ErrorMessage = "O campo {0} é obrigatório")]
public int QuantidadeParcelas { get; set; }

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
[DataType(DataType.Date, ErrorMessage = "Data em formato inválido")]
[DisplayName("Data do Primeiro Vencimento")]
[Required(ErrorMessage = "O campo {0} é obrigatório")]
public DateTime DataPrimeiroVencimento { get; set; }

[DisplayFormat(DataFormatString = "{0:C}")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[DisplayName("Valor do Documento")]
[RegularExpression(@"^(?!0*(\.0+)?$)(\d+|\d*\.\d+)$", ErrorMessage = "O campo {0} não pode conter valor 0")]
public decimal ValorDocumento { get; set; }

VIEW:

@model Retaguarda.Application.ViewModels.Financeiro.FinanceiroParcela.CriarParcelasAutomaticamenteViewModel
@{
    ViewData["Title"] = "Criar Parcelas Automaticamente";
    Layout = null;
}

<div>
    <form asp-action="CriarParcelasAutomaticamente"  id="frmCriarParcelasAutomaticamente">

        <div class="modal-header modal-header-primary">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4><i class="modal-title text-center icon wb-list m-5" style="font-size:22px;"></i> @ViewData["Title"] </h4>
        </div>
        <div class="modal-body">

            @*<vc:summary />*@
            <div class="panel">
                <div class="panel-body container-fluid pt-10 pl-15 pr-15">
                    <div class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <label asp-for="QuantidadeParcelas" class="control-label">Quantidade de Parcelas</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="icon fa-list-ol" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <input asp-for="QuantidadeParcelas" id="txt-criar-parcelas-quantidade-parcelas" class="form-control" />
                                </div>
                                <span asp-validation-for="QuantidadeParcelas" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="DataPrimeiroVencimento" class="control-label">Data do Primeiro Vencimento</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="icon wb-calendar" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <input asp-for="DataPrimeiroVencimento" id="txt-criar-parcelas-data-primeiro-vencimento" class="form-control" />
                                </div>
                                <span asp-validation-for="DataPrimeiroVencimento" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="ValorDocumento" class="control-label">Valor do Documento</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="icon fa-dollar" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <input asp-for="ValorDocumento" id="txt-criar-parcelas-valor-documento" class="form-control" />
                                </div>
                                <span asp-validation-for="ValorDocumento" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <div class="float-right">
                <div class="btn-group btn-group-sm mr-auto" role="group">
                    <div class="btn-group btn-group-sm" role="group">
                        <button id="btn-criar-parcelas" class="btn btn-success"><i class="icon wb-check"></i> Criar Parcelas </button>
                    </div>
                    <button id="btn-fechar-criar-parcelas" type="button" class="btn btn-danger"><i class="icon wb-close"></i> Fechar </button>
                    @*<button id="btn-fechar-criar-parcelas" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Fechar </button>*@
                </div>
            </div>
        </div>
    </form>
</div>

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/moment/moment-with-locales.min.js"></script>
<script>
    moment.locale("pt-br");
    jQuery.extend(jQuery.validator.methods, {
        date: function (value, element) {
            console.log(value);
            return this.optional(element) ||
                (moment(value, "DD/MM/YYYY").isValid() ||
                    moment(value, "YYYY-MM-DD").isValid())
        },
        number: function (value, element) {
            console.log(value);
            return this.optional(element)
                || /^-?(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);

        }
    });
</script>