Here if I click the button, it will do its work and show a congratulations modal and in case of invalid input, it should return a alert msg only and should not show the modal. But in my case, even in the case of invalid input, the modal is showing after clicking the btn

HTML Code

<button id="btn_noa" onclick="my_modal_1.showModal()"
                            class="btn btn-md border-2 px-6 bg-color_lime font-bold w-full text-lg">Donate Now</button>

                        <dialog id="my_modal_1" class="modal">
                            <div class="modal-box flex justify-center items-center flex-col space-y-4">
                                <h3 class="font-bold text-3xl">Congrats!</h3>
                                <img src="./assets/coin.png" alt="">
                                <p>You Have Donated for Humankind</p>
                                <h2 class="text-2xl font-bold">Successfully</h2>
                                <div class="modal-action">
                                    <form method="dialog">
                                        <!-- if there is a button in form, it will close the modal -->
                                        <button class="btn">close confirmation</button>
                                    </form>
                                </div>
                            </div>
                        </dialog>

Can you please suggest what would be appropriate?
Thanks

I tried to remove the onclick part from html and added it in JS part after validation

HTML Code

<button id="btn_noa"
                            class="btn btn-md border-2 px-6 bg-color_lime font-bold w-full text-lg">Donate Now</button>

JS Code

if (isNaN(noaAmount) == true || noaAmount <= 0) {
        alert('Invalid Donation Amount');
        return; 
    }

noaDonation.setAttribute('onclick', 'my_modal_1.showModal()');