时间戳

首页 > 解决方案 > 如何让一个事件阻止另一个事件在 javascript 中提交表单时触发？

javascript - 如何让一个事件阻止另一个事件在 javascript 中提交表单时触发？

问题描述

我有一个这样的html页面：

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="validation.js"></script>
    <script>
      function show_warning()
      {
        // If some condition is true, show a warning when the form is being submitted
        if (condition)
        {
          alert("Warning");
        }
      }

      $(document).ready(function() {
        $("form").submit(show_warning);
      });
    </script>
  </head>
  <body>
    <form method=POST>
        ...
    </form>
  </body>
</html>

我的validation.js 看起来像这样：

$(document).ready(function() {
    $("form").submit(function( event ) {
      if (some_field_is_invalid)
      {
        alert("Error");
        event.preventDefault();
        return false;
      }
    });
});

我希望我的 show_warning 仅在表单通过验证并实际提交时触发。现在，即使验证失败，它仍然会显示警告。

我究竟做错了什么？

标签： javascripthtml

解决方案

如果我没记错的话（我使用 jquery 事件处理已经有一段时间了），希望社区能纠正我。

TL;博士; 删除这个：

function show_warning()
{
  // If some condition is true, show a warning when the form is being submitted
  if (condition)
  {
    alert("Warning");
  }
}

$(document).ready(function() {
  $("form").submit(show_warning);
});

并像这样更新您的validation.js：

// You can refactor the code to transform if to ternary
$(document).ready(function() {
    $("form").submit(function( event ) {
      if (some_field_is_invalid)
      {
        alert("Error");
        event.preventDefault();
        return false;
      // Your special condition. Warning will show if form is valid and condition is true, if condition is not true but form is valid then it will submit without warning
      } else if (condition) {
        alert('Warning');
      }
    });
});

Explanation: You are assigning 2 listeners in your code, one in your html and one in validation js, basically you have 2 functions listening to submit and both of them are independend from each other and being fired on submit of the form. But only validation.js is checking the validity of the form and show_warning is not checking the same validity, it has its own different condition (I dont know what condition is that). If you combine both of them in one listener function you will reach what you wanted.

P.S. I would recommend you to use validation.js as a service so that it would provide you the function or a class that will return boolean based on the form validity and you would be able to use that method/class to first validate and then do what you need after its passed. small example:

<html>
  <head>
    <script src="jquery.js"></script>
    <!-- Lets say validation.js provides a function isFormValid(submitEvent): boolean -->
    <!-- You can implement validation anyhow you want -->
    <script src="validation.js"></script>
    <script>
      $(document).ready(function() {
        $("form").submit(function(event) {
            if (!isFormValid(event)) {
              return event.preventDefault();
            }
            
            // Form is valid do what you need here
            if (condition) {
              alert('Warning');
            }
        });
      });
    </script>
  </head>
</html>

推荐阅读