Question

我无法弄清楚为什么我的脚本未触发。我正在尝试为此选择元素创建表单验证，要求选择 <script type="text/x-mathjax-config"> MathJax.Hub.Config{ CommonHTML: { scale: 120 } }); </script> <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"> </script>选项，然后将以下输入字段设置为Other。照原样，当在选择元素中选择required时，other_lab输入字段不会变成required。这是代码：

Other

Answer 1

如果您onsubmit在任何输入元素上添加required属性，我认为它没有任何作用。那只会影响下一次提交。

相反，如果您要确保表单提交不会通过，请使用

e.preventDefault();

在需要阻止它的条件内。这将取消提交，并且添加的required属性可以在下一次提交时生效。

Answer 2

使用document.getElementById代替，以表单ID作为参数，将其与其他元素一起使用，为什么不也将其与表单一起使用？

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

var form = document.getElementById('form_1');
form.onsubmit = function(e) {
  alert('submit');
}

<form id="form_1" method="post">
  <label>Lab</label>
  <select id="lab" required name="lab">
    <option disabled selected value="">Choose lab</option>
    <option value="Lab_1">ABC</option>
    <option value="Lab_2">DEF</option>
    <option value="Other">Other</option>
  </select>

  <label for="other_lab">If other, please specify: </label>
  <input name="other_lab" id="other_lab" size="15">
  <input type="submit" value="submit" />
</form>

document.getElementsByTagName返回一个NodeList，而不是单个DOM节点。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

注意元素中的 s ，表示它返回某种形式的集合。

我建议您看看此页面以了解HTML表单：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Answer 3

您可以通过在selectbox的change事件上绑定相同的函数来解决此问题。

为什么此JS表单验证脚本未触发？

3 个答案: