当有警报显示时如何防止表单发送？ JavaScript

Question

我在我的网站上创建了一个联系表格，我有几个 js 函数来检查值是否有效。 当前发生的是-功能确实有效，它们检查了它们应该做什么，并且警报也显示了-但是在显示所有警报之后，它仍然提交表单。 我尝试使用 Prevent 方法和 window.back.history 但没有奏效......我该如何解决？

JavaScript 部分：

<script>
   function validateForm1() {
        var firstname = document.forms["contactus"]["fname"].value;
        if (firstname == "") {
          alert("Please provide your first name");
          return false;
          e.preventDefault();
          window.history.back();
            }
        }
  
        document.getElementById("gender").addEventListener('click',checkradio);

        function checkradio() {
        if(document.getElementById("genderm").checked == false && document.getElementById("genderf").checked == false && document.getElementById("gendero").checked == false  ){
            alert("Please select your gender");
            return false;
            e.preventDefault();
            window.history.back();}
        }

        function checkbox(){
        if (document.querySelector('#cbr:checked') == null){
            alert("Please choose a subject");
            return false;
            e.preventDefault();
            window.history.back();
        }

        function agecheck(){
        var x = document.forms["contactus"]["age"].value;
        var y = 18;
        if(x<y)
        {
            alert("Please submit the form only if you're 18 yo");
            return false;
            e.preventDefault();
            window.history.back();
        }
        }

    }
        
        </script>

我的 HTML 部件使用提交方法并链接到：

        <form id="contactus" name="contactus" action="http://jkorpela.fi/cgi-bin/echo.cgi" onsubmit="validateForm1();checkbox();checkradio();agecheck()" style="float:right;text-align: right; direction: rtl;">

Answer 1

我认为您可以将“return”放入“onsubmit”中。

<script>
    function validateForm1() {
        var firstname = document.forms["contactus"]["fname"].value;

        if (firstname == "") {
            alert("Please provide your first name");
            return false;
        }

        if (document.getElementById("genderm").checked == false && document.getElementById("genderf").checked == false && document.getElementById("gendero").checked == false) {
            alert("Please select your gender");
            return false;
        }

        if (document.querySelector('#cbr:checked') == null) {
            alert("Please choose a subject");
            return false;
        }

        var x = document.forms["contactus"]["age"].value;
        var y = 18;

        if (x < y) {
            alert("Please submit the form only if you're 18 yo");
            return false;
        }
    }
</script>

<form id="contactus" name="contactus" action="http://jkorpela.fi/cgi-bin/echo.cgi" onsubmit="return validateForm1();" style="float:right;text-align: right; direction: rtl;"></form>

Answer 2

在您的每个表单中，您都可以使用所需的标签，因此他们总是必须在该字段中输入一些内容。

例如

<input type="text" id="username" name="username" required>