Je souhaite qu'un formulaire ne soit pas envoyé et rechargé la page. Au lieu de cela, je veux qu'il exécute la fonction runTest().

J'ai essayé ce qui suit:

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

Et dans ../test/test2.js:

function runTest() {...}

Cependant, le formulaire se soumet et la page se recharge, et runTest() ne s'exécute pas.

Aide appréciée.

À partir de cette réponse, j'ai modifié ma fonction runTest() pour qu'elle soit:

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() a été intégré au navigateur dans test2.js

Cependant, le formulaire est toujours soumis, la page se recharge et runTest() ne s'exécute pas.

0
Steve 20 nov. 2018 à 09:58

4 réponses

Meilleure réponse

Vous pouvez gérer l'événement d'envoi du formulaire par programmation avec Javascript en utilisant la fonction addEventListener comme ci-dessous:

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>
0
Steve Nosse 20 nov. 2018 à 07:28

Remplacez le type de ce bouton par button à la place submit, puis envoyez votre formulaire en utilisant JavaScript comme celui-ci.

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

Et supprimez la partie de retour de votre attribut onclick.

1
RopAli Munshi 20 nov. 2018 à 07:26

Veuillez essayer le code ci-dessous,

Utilisez e.preventDefault(); n'envoyez pas la réponse sous forme de variable utilisé return false; au lieu de 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;
        });

    } 

Ou

 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;
        }
    }
0
JIJOMON K.A 20 nov. 2018 à 07:28

Passer l'événement dans votre html.

onsubmit="return runTest(event)"

Puis appelez preventDefault dans votre fonction et retournez false à la fin.

function runTest(e) {
   e.preventDefault();
   .
   .
   .
   return false;
}
3
Hadi290 20 nov. 2018 à 07:26