表单 onsubmit="return function()" 但表单仍在提交和页面重新加载

Question

我希望表单不提交并重新加载页面。相反，我希望它运行 runTest() 函数。

我尝试了以下方法：

<form id="dataForm" onsubmit="return runTest()">
    <input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
    <input type="text" id="number" placeholder="enter a number" required maxlength="10" pattern="\d{10}"><br />
    <input type="submit" id="submitTest">
</form>
<script src="../test/test2.js"></script>

在../test/test2.js:

function runTest() {...}

但是，表单提交和页面重新加载，runTest() 没有运行。

帮助表示赞赏。

从this answer，我将runTest() 函数更改为：

function runTest() {

    var validate = true;
    describe("Simple assert", function() {
        it("foo != bar", function() {
            assert('foo' != 'bar', 'foo is not bar');
        });
        it('should return true if field is valid', function(){
            var isValidText = isValidField('text');
            var isValidNumber = isValidField('number');
            assert.equal(isValidText, true);
            assert.equal(isValidNumber, true);
        });
        validate = false;
    });
    return validate;
} 

runTest() 已被浏览器识别为test2.js

但是，表单仍然提交，页面重新加载，runTest() 没有运行。

Answer 1

在你的 html 中传递事件。

onsubmit="return runTest(event)"

然后在你的函数中调用 preventDefault 并在最后返回 false。

function runTest(e) {
   e.preventDefault();
   .
   .
   .
   return false;
}

Answer 2

将该按钮的类型更改为button 而不是submit，然后像这样使用JavaScript 提交您的表单

document.getElementById("dataForm").submit(); 

并从您的 onclick 属性中删除返回部分。

Answer 3

您可以使用 Javascript 使用 addEventListener 函数以编程方式处理表单的提交事件，如下所示：

document.getElementById("dataForm").addEventListener("submit", function(e){
  e.preventDefault() //to block page reload
  var validate = true;
  describe("Simple assert", function() {
      it("foo != bar", function() {
          assert('foo' != 'bar', 'foo is not bar');
      });
      it('should return true if field is valid', function(){
          var isValidText = isValidField('text');
          var isValidNumber = isValidField('number');
          assert.equal(isValidText, true);
          assert.equal(isValidNumber, true);
      });
      validate = false;
  });
  return validate;
})

<form id="dataForm">
    <input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
    <input type="text" id="number" placeholder="enter a number" required maxlength="10" pattern="\d{10}"><br />
    <input type="submit" id="submitTest">
</form>

Answer 4

请尝试以下代码，

使用e.preventDefault(); 不要将响应作为可验证的内容发送 使用return false; 而不是return validate;

function runTest() {
    e.preventDefault();
        describe("Simple assert", function() {
            it("foo != bar", function() {
                assert('foo' != 'bar', 'foo is not bar');
            });
            it('should return true if field is valid', function(){
                var isValidText = isValidField('text');
                var isValidNumber = isValidField('number');
                assert.equal(isValidText, true);
                assert.equal(isValidNumber, true);
            });
           return false;
        });

    } 

或

 function runTest() {

        var validate = 'true';
        describe("Simple assert", function() {
            it("foo != bar", function() {
                assert('foo' != 'bar', 'foo is not bar');
            });
            it('should return true if field is valid', function(){
                var isValidText = isValidField('text');
                var isValidNumber = isValidField('number');
                assert.equal(isValidText, true);
                assert.equal(isValidNumber, true);
            });
            validate = 'false';
        });
alert(validate)
        if(validate=='false'){
             return false;
        }
    }