Question

关于如何在表单上使用addEventListener拦截SUBMIT，有一个great answer here。只要通过提交按钮（或ENTER）提交表单，它就能很好地工作。

虽然被解雇时完全被忽略了：

document.getElementById('myform').submit();

你会如何拦截这样的电话？

以下是例子：

<script>
function checkRegistration(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}
</script>

<form onsubmit="return checkRegistration()" method="get" action="http://google.com" id='myform'>
    Write google to go to google..<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>
<a href="javascript:document.getElementById('myform').submit();">Ignore validation</a>

Answer 1

确定。这是一个可能的解决方案，需要一些锤击但可能有效：

以下是您的样本：

<script>
function checkRegistration(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}
</script>

HTML：

<form onsubmit="return checkRegistration()" method="get" action="http://google.com" id='myform'>
    Write google to go to google..<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>
<a href="javascript:document.getElementById('myform').submit();">Ignore validation</a>

这是一个开始捕获事件的算法。如果调用form.submit programmaticaly，而不是覆盖似乎被忽略的onsubmit事件，则必须覆盖表单的submit方法。

<script>
    //document.getElementById('myform').onsubmit = function() {alert('testing'); return false;}
  var form = document.getElementById('myform');

  // Store the original method
  var tmp = form.submit;

  // create an intercept and override the submit method for the form with it
  form.submit = function(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    // when happy with the validation, apply the old method to the form
    tmp.apply(form);
  }

</script>

我在本地机器上试过它似乎工作。现在，您必须推广此算法以处理任意形式。这可能会解决你的问题。

Answer 2

事件监听器仅在user action submits the form

时被触发

＆＃13;

document.getElementById('myform').addEventListener(
  "submit",
  function(e){
    e.preventDefault();
    console.log("not submitting form");
  }
);
//the following never triggers the event listener:
//https://stackoverflow.com/questions/645555/should-jquerys-form-submit-not-trigger-onsubmit-within-the-form-tag
//document.getElementById('myform').submit();

＆＃13;

<form id="myform">
  <input type="submit" >
</form>

＆＃13;

解决方案可能是：

if(validation){
  myForm.submit();
}

Answer 3

我想我刚刚找到了你要找的东西。你应该直接设置动作让JS在提交时处理它。

＆＃13;

function check(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}

＆＃13;

<form id="myform" action="javascript:check();">
    <input type="text" id="some_input">
    <input type="submit">
</form>

＆＃13;

＆＃13; 你也可以这样做：
<form ... action="javascript:function(){...}">

如何拦截JS事件触发的表单提交（在普通的JS中）？

3 个答案: