Javascript onclick event is not working in form validation

Hi i'm working in form validation here onclick is not working submitBtn.on('click', e => {} what might be the issue i had tried .addEventListener also both are not working. Can anyone suggest me.

class Registrationform {
  constructor() {
    this.initializeElements();
  }
  initializeElements() {
    this.demoRegisterWrap = $('.demoRegister-wrap');
    this.registrationForm = $('.registration-form');
    this.fname = '#name';
    this.email = '#email-id';
    this.password = '#password';
    this.formValidation();
  }
  formValidation() {
    let submitBtn = this.demoRegisterWrap.find('.btn-submit');
    submitBtn.on('click', e => {
      alert('test');
      e.preventDefault();
      var text = "";
      if (firstName(fname)) {}
      if (email(email)) {}
      if (password(password)) {}
      return false;
    });
    /*first name input validation*/
    function firstName(fname) {
      var message = document.getElementsByClassName("error-message");
      var letters = /^[A-Za-z]+$/;
      if (fname == "" || fname.match(letters)) {
        text = "";
        message[0].innerHTML = text;
        return true;
      } else {
        text = "First name should contain only letters";
        message[0].innerHTML = text;
        return false;
      }
    }


    /*email address input validation*/
    function email(email) {
      var message = document.getElementsByClassName("error-message");
      var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      var atpos = email.indexOf("@");
      var dotpos = email.lastIndexOf(".");

      if (email == "" || email.match(mailformat) || atpos > 1 && (dotpos - atpos > 2)) {
        text = "";
        message[1].innerHTML = text;
        return true;
      } else {
        text = "Wrong email format";
        message[1].innerHTML = text;
        return false;
      }
    }

    /*validate password*/
    function password(password) {
      var message = document.getElementsByClassName("error-message");
      var illegalChars = /[\W_]/;
      if (illegalChars.test(password)) {
        text = "Password contains illegal characters";
        message[2].innerHTML = text;
        return false;
      } else if ((password.search(/[0-9]+/) == -1)) {
        text = "Password should contain at least one number";
        message[2].innerHTML = text;
        return false;
      } else {
        text = "";
        message[2].innerHTML = text;
        return true;
      }
    }
  }

}

new Registrationform();
export default Registrationform;
<form class="registration-form" novalidate>
  <fieldset>
    <br/>
    <input type="text" id="name" name="name" placeholder="Name" />
    <p class="error-message"></p>
    <input type="text" id="email-id" placeholder="Email" />
    <p class="error-message"></p>
    <input type="password" id="password" pattern=".{8,}" title="8 characters minimum" />
    <p class="error-message"></p>
    <label for="submit"></label>
    <input class="button" class="btn-submit" type="submit" value="submit" name="submit" />
  </fieldset>
</form>



Read more here: https://stackoverflow.com/questions/67931315/javascript-onclick-event-is-not-working-in-form-validation

Content Attribution

This content was originally published by Husna at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: