onsubmit="function()" is not working

Question

I want to validate the dynamically added fields of the form(present in the templates/appname) in django. I am adding those fields with the help of the javascript (addInput.js - stored at a place mentioned as source in the script tag) which also has the logics for removing those fields as well as validating those fields values. But when I click send_invites button, it directs me again to app/register when I first want that it should go to the validateEmail() function if everything is fine then it should redirect to app/register.

    var counter = 1;
    var limit = 5;

    function addInput(divName) {

      if (counter == limit) {

        alert("You have reached the limit of adding " + counter + " Email Addresses");

      } else {

        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<p id = 'remove" + counter + "'>Email Address " + (counter + 1) + " : " + "<input type = 'text' name ='myInputs[]'></p>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
        alert(counter + "add");
      }
    }

    function removeInput(divName) {

      if (counter == 1) {

        alert("You have reached the limit of removing Email Addresses");

      } else {
        counter--;
        var olddiv = document.getElementById("remove" + counter);
        alert(counter + "remove");
        olddiv.parentNode.removeChild(olddiv);

      }
    }

    function validateEmail(divName) {

      var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/;

      console.log("cmn");
      alert("cmn");
      for (i = 0; i < counter; i++) {

        var email = $("#remove" + i).val();

        alert(email);
        //      return true;

      }
      return true;

    }

<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <br>

      <h1 class="page-header">
        Send Invites
        </h1>

      <form method="POST" onsubmit="return validateEmail('dynamicInput')" action="/app/register/">
        <div id="dynamicInput">
          <p id='remove0'>Email Address 1 :
            <input type="text" name="myInputs[]">
          </p>

        </div>
        <br>
        <br>
        <input type="button" value="Add another Email Address" onClick="addInput('dynamicInput');">
        <input type="button" value="Remove Email Address Field " onClick="removeInput('dynamicInput');">

        <br>
        <br>
        <input type="submit" value="Send Invites">
        <input type='hidden' name='csrfmiddlewaretoken' value='xyz' />
      </form>

      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<style>
  a.active {
    background-color: #eee;
  }
</style>

But why is this not happening? other two javascript functions addInput and removeInput are working fine. Only validateEmail is not getting called, for which I am even calling alert and console.log but nothing is getting displayed. Please help. I am new to javascript.

Answer 1

Running the code, clicking the button, you get the following error in the console.

Uncaught SyntaxError: Invalid regular expression: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/: Unterminated group

Looking at the code you have an extra (

/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]+.)+([a-zA-Z0-9]{2,4})+$/;
                    ^

So you are either missing a closing ) or you have the extra (. My guess is you are missing a ) before the +. Look at wherever you found the reg exp and see what it should be.