除非在Javascript中,否则表单onsubmit将不起作用

时间:2017-04-27 17:36:02

标签: javascript html forms onsubmit

我最近开始进行表单验证,我正在尝试理解某些内容。我还没有在SE上的任何其他地方找到这个。

如果onsubmit="return validateForm()"元素中有onsubmit="validateForm()"<form>,则表单不会执行任何操作。但是,当我从表单标记中删除onsbumit而不是在JS文件中执行document.forms["favorite"].onsubmit = function validateForm()时,它可以正常工作。

我得到了它的工作,但我试图理解为什么html中onsubmit的“正常”方法不起作用。

供参考,这是我现在的代码:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="form.js"></script>
    <title>Form</title>
  </head>
  <body>
    <form name="favorite" action="#" method="post">
      Favorite Car Brand: <input type="text" name="car">
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

JS:

window.onload = function(){
  document.forms["favorite"].onsubmit = function validateForm(){
    var input = document.forms["favorite"]["car"].value;
    if(input == ""){
      alert("You missed an entry");
      return false;
    }
  }
}

1 个答案:

答案 0 :(得分:0)

首先我们定义一个函数然后调用该函数。并且在定义之前调用该函数,因为您正在使用window.load.You需要在window.load之前定义验证函数。抱歉我的英语不好。

<script>
    window.onload = function () {
        function validateForm() {
            var input = document.forms["favorite"]["car"].value;
            if (input == "") {
                alert("You missed an entry");
                return false;
            }
        }
    }

</script>
在window.load之前

定义validateForm()函数你不需要在window.load中编写这个函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <title>Form</title>
        <script>
            function validateForm() {
                    var input = document.forms["favorite"]["car"].value;
                    if (input == "") {
                        alert("You missed an entry");
                        return false;
                    }
                }
        </script>
    </head>
    <body>
        <form name="favorite" action="#" onsubmit="return validateForm();" method="post">
            Favorite Car Brand: <input type="text" name="car">
            <input type="submit" value="Submit">
        </form>


    </body>
</html>