Ytukyg

I want a form to not submit and reload the page. Instead I want it to run the runTest() function.

I've tried the following:

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

and in ../test/test2.js:

function runTest() {...}

However, the form submits and the page reloads, and runTest() does not run.

Help appreciated.

From this answer, I've altered my runTest() function to be:

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() has been browserfyd into test2.js

However, the form still submits, the page reloads, and runTest() does not run.

You can handle the submit event of the form programmatically with Javascript using the addEventListener function as below:

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>

pass event in your html.

onsubmit="return runTest(event)"

and then call preventDefault in your function and return false at the end.

function runTest(e) {

   e.preventDefault();

   .

   .

   .

   return false;

}

Change the type of that button to button instead submit then submit your form using JavaScript like this

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

and remove the return part from you onclick attribute.

Please try the below code,

use e.preventDefault();
dont send the response as a veriable
use return false; instead of 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;

        });



    } 

or

 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;

        }

    }