代码之家 › 专栏 › 技术社区 › Steve

表单onSubmit=“return function()”但表单仍在提交和页面重新加载

forms javascript

Steve · 技术社区 · 7 年前

我希望表单不提交和重新加载页面。相反,我希望它运行 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() {...}

但是,表单提交和页面重新加载,以及 运行测试() 不运行。

感谢您的帮助。

从 this answer ,我改变了我的 运行测试() 功能是:

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;
}

运行测试() 已经被浏览成 test2.js

但是,表单仍然提交,页面重新加载,以及 运行测试() 不运行。

4 回复 | 直到 7 年前

Steve 7 年前

您可以使用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>

pheroMona13 7 年前

在HTML中传递事件。

onsubmit="return runTest(event)"

然后在函数中调用preventdefault,最后返回false。

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

Ropali Munshi 7 年前

将该按钮的类型更改为 button 相反 submit 然后用这样的javascript提交表单

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

并从onclick属性中移除返回部分。

JIJOMON K.A 7 年前

请尝试以下代码,

使用 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;
        }
    }