Javascript 如何在表单中的@onsubmit上同时运行函数？

我正在尝试使用HTML5、JavaScript、PHP和CSS创建一个表单。然而，这个问题与前两个有关

我的HTML：

<form name="register" action="register.php" method="POST" onsubmit="if (submitCheck(this) && genderCheck()){this.submit();} else {return false;}">
            <label>First Name:</label>
            <input type="text" id="firstName" name="firstName"><br />
            <label id="warning_first"></label>
            <br />
            <label>Surname:</label>
            <input type="text" id="lastName" name="lastName"><br />
            <label id="warning_second"></label>
            <br />
            <label>Gender:</label>
            <input type="radio" name="gender" value="Male" id="male">Male
            <input type="radio" name="gender" value="Female">Female
            <input type="radio" name="gender" value="Other">Other
            <input type="radio" name="gender" value="Prefer not to say"> Prefer not to say <br />
            <label id="warning_third"></label>
            <br />
            <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
            <input type="submit" id="submit" name="submit" value="Register">
        </form>
        <script src="script.js"></script>

---

问题是，当我按下submit时，onsubmit部分会执行并检查，但当我将所有字段留空时，“This is required”（这是必需的）消息只会出现在前两个按钮上，而不会出现在性别单选按钮上。我怎样才能解决这个问题

只需在单选按钮上迭代并检查是否至少选择了其中一个按钮

当然，这可以通过不同的方式实现。所有单选按钮的名称属性都设置为性别。Javascript提供了一个强大的函数来获取一个节点列表——本质上是一个数组——包含所有同名元素：getElementsByName（name）

让我们稍微修改一下genderCheck函数：

var elements=document.getElementsByName("gender");

元素现在拥有所有单选按钮的节点列表。HTML单选按钮有一个名为.checked的特殊属性，如果查询该属性，即该单选按钮确实已选中，则返回true。 因此，让我们遍历nodeList并检查至少一个已检查的节点属性是否为true：

  var checked = false;
  for (var a = 0; a < elements.length; a++) {
    if (elements[a].checked) {
      checked = true;
    }
  }

因此，要完成此函数，如下所示：

function genderCheck() {
  var elements = document.getElementsByName("gender");
  var checked = false;
  for (var a = 0; a < elements.length; a++) {
    if (elements[a].checked) {
      checked = true;
    }
  }
  if (checked) {
    document.getElementById("warning_third").innerHTML = "";
    return true;
  } else {
    document.getElementById("warning_third").innerHTML = "This is required!";
    return false;
  }
}

函数genderCheck（）{
var elements=document.getElementsByName（“性别”）；
var检查=假；
对于（var a=0；a

执行submitCheck（）的唯一原因是因为AND运算符的行为就是这样

说明：

AND（&&）运算符执行以下操作：

• 从左到右计算操作数
• 对于每个操作数，将其转换为布尔值。如果结果为false，则停止并返回该操作数的原始值
• 如果已计算所有操作数（即所有操作数均为真值），则返回最后一个操作数

换言之，并返回第一个falsy值，如果未找到，则返回最后一个值

解决此问题：

HTML页面：

<form name="register" action="register.php" method="POST" onsubmit="if(finalcheck()){submit();} else {return false;}">
<label>First Name:</label>
<input type="text" id="firstName" name="firstName"><br />
<label id="warning_first"></label>
<br />
<label>Surname:</label>
<input type="text" id="lastName" name="lastName"><br />
<label id="warning_second"></label>
<br />
<label>Gender:</label>
<input type="radio" name="gender" value="Male" id="male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Other">Other
<input type="radio" name="gender" value="Prefer not to say"> Prefer not to say <br />
<label id="warning_third"></label>
<br />
<input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
<input type="submit" id="submit" name="submit" value="Register">
</form>
<script src="script.js"></script>

*注:

• 大多数情况下，你们会知道这一点，但若你们不知道，那个么你们可以在输入标签中探索“必需”选项

• 您应该很好地模块化功能，并检查性别无线电组，您只为一个输入提供了id值

---

无需将if查询放入submit上的elements属性

。这种方式总是错误的好来源。创建一个函数，收集所有nessecary状态并返回true或false。另一个打开：检查字符串的长度
=
或
==
就足够了。@reporter，我应该检查onSubmit中一个函数中的所有内容吗？我该怎么做？创建一个包含“中心布尔值”的函数。想想什么时候允许提交，什么时候不允许，然后把你的测试放在那里。目标是：返回true提交将被触发，返回false提交不会被浏览器触发。谢谢，我不知道输入标签上的“required”属性。这大大简化了我的工作。
function genderCheck() {
  var elements = document.getElementsByName("gender");
  var checked = false;
  for (var a = 0; a < elements.length; a++) {
    if (elements[a].checked) {
      checked = true;
    }
  }
  if (checked) {
    document.getElementById("warning_third").innerHTML = "";
    return true;
  } else {
    document.getElementById("warning_third").innerHTML = "This is required!";
    return false;
  }
}

<form name="register" action="register.php" method="POST" onsubmit="if(finalcheck()){submit();} else {return false;}">
<label>First Name:</label>
<input type="text" id="firstName" name="firstName"><br />
<label id="warning_first"></label>
<br />
<label>Surname:</label>
<input type="text" id="lastName" name="lastName"><br />
<label id="warning_second"></label>
<br />
<label>Gender:</label>
<input type="radio" name="gender" value="Male" id="male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Other">Other
<input type="radio" name="gender" value="Prefer not to say"> Prefer not to say <br />
<label id="warning_third"></label>
<br />
<input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
<input type="submit" id="submit" name="submit" value="Register">
</form>
<script src="script.js"></script>

function submitCheck() {
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;

    function firstNameCheck() {
        if (firstName.length !== 0) {
            return true;
        } else {
            document.getElementById("warning_first").innerHTML = "This is required!";
            return false;
        }
    }
    if (lastName.length !== 0 && firstNameCheck()) {
            document.getElementById("warning_first").innerHTML = "";
            document.getElementById("warning_second").innerHTML = "";
            return true;
        } else if (lastName.length !== 0 && firstNameCheck() !== true) {
            document.getElementById("warning_first").innerHTML = "This is required!";
            document.getElementById("warning_second").innerHTML = "";
            return false;
        } else if (lastName.length === 0 && firstNameCheck()) {
            document.getElementById("warning_second").innerHTML = "This is required!";
            document.getElementById("warning_first").innerHTML = "";
            return false;
        } else {
            document.getElementById("warning_second").innerHTML = "This is required!";
            document.getElementById("warning_first").innerHTML = "This is required!";
            return false;
    }

}

function genderCheck() {
    if (document.getElementById("male").checked) {
        document.getElementById("warning_third").innerHTML = "";
        return true;
    } else {
        document.getElementById("warning_third").innerHTML = "This is required!";
        return false;
    }
}

function finalcheck(){
    submitCheck();
    genderCheck();

    if(submitCheck() && genderCheck()){
        return true;
    }
    else{
        return false;
    }
}