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()已被Browserfyd导入test2.js

但是，表单仍在提交，页面重新加载并且runTest()无法运行。

Answer 1

通过html中的事件。

./bin/tree-tagger

，然后在函数中调用preventDefault，最后返回false。

onsubmit="return runTest(event)"

Answer 2

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

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

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

Answer 3

请尝试以下代码，

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

Answer 4

您可以使用addEventListener函数，通过Javascript以编程方式处理表单的Submit事件：

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>

表单onsubmit =“ return function（）”，但表单仍在提交和页面重新加载

4 个答案: