artemsites
3/9/2020 - 11:28 AM

Конструктор для валидации заполнения формы | Constructor for validating form filling

Конструктор для валидации заполнения формы | Constructor for validating form filling

  let validateForm = new ValidateForm('#email', '#password', '#confirmPassword', '#passwordNotice', 'correct', 'error', 'visible');


  window.onload = function() {    
    validateForm.setEmail( $('#email').val() );
    validateForm.emailIsCorrect();
  }();


  $('#email').on( "focus, blur, click, focusout, keyup", function(e){    
    validateForm.setEmail( $(this).val() );
  });


  $('input[type=password]').on('click', function() {
    $('#passwordNotice').addClass('visible');
  });


  // $('#password, #confirmPassword').on('focusout', function() {
  //   $('#passwordNotice').removeClass('visible');
  // });


  $('#password').on( "focusout, keyup", function(e){    
    validateForm.setPassword( 1, $(this).val() );    
  });


  $('#confirmPassword').on( "focusout, keyup", function(e){    
    validateForm.setPassword( 2, $(this).val() );  
  });
  /**
   * @param {'#email'} selectorEmail 
   * @param {'#password'} selectorPassword 
   * @param {'#confirmPassword'} selectorConfirmPassword 
   * @param {'correct'} classCorrect 
   * @param {'error'} classError 
   */
  function ValidateForm( selectorEmail, selectorPassword, selectorConfirmPassword, selectorPasswordNotice, classCorrect, classError ) {

    this.email = null;
    this.$email = $(selectorEmail);
    this.setEmail = function(newValue) {
      // console.log('this.setEmail');
      this.email = newValue;
      this.emailIsCorrect();
    };
    this.emailIsCorrect = function(email = this.email) {
      // console.log('this.emailIsCorrect');
      if (email === null || email === '') {
        this.$email.removeClass(classError);
        this.$email.removeClass(classCorrect);
      } else {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if ( regex.test(email) ) {
          this.$email.removeClass(classError);
          this.$email.addClass(classCorrect);
          return true;
        } else {
          this.$email.removeClass(classCorrect);
          this.$email.addClass(classError);
          return false;
        }     
      }
    };
    this.password = null;
    // this.password = {
    //   first: null,
    //   second: null
    // };
    this.$password = $(selectorPassword);
    this.confirmPassword = null;
    this.$confirmPassword = $(selectorConfirmPassword);
    this.$passwordNotice = $(selectorPasswordNotice);
    this.setPassword = function(number, newValue) {
      if (number === 1) {
        this.password = newValue;
        if ( this.passwordIsValid(this.password, 1) ) {
          this.addClassCorrect( this.$password );
          this.addClassCorrect( this.$passwordNotice );
          if ( this.passwordsIsEqual() ) {
            this.addClassCorrect( this.$confirmPassword );
          } 
          // else {
          //   this.addClassError( this.$passwordNotice );
          // }
        } else {
          this.addClassError( this.$passwordNotice );
          this.addClassError( this.$password );
          this.addClassError( this.$confirmPassword );//auto set not valid for second password
        }
      } else if (number === 2) {
        // console.log('setPassword 2');
        this.confirmPassword = newValue;
        if ( this.passwordIsValid(this.confirmPassword, 2) ) {
          // console.log('passwordIsValid 2');
          this.addClassCorrect( this.$confirmPassword );
        } else {
          // console.log('passwordIs NOT Valid 2');
          // console.log( this.$confirmPassword );
          this.addClassError( this.$confirmPassword );
        }
      }
    };
    this.passwordIsValid = function( pass, number = 1 ) {
      if (pass===null) {
        console.log('Password is empty...');
        return false;
      }
      //TODO: empty string should be with no error marker
      // console.log(pass);
      // console.log(number);
      // if ( pass === null || pass === '' ) {
      //   if ( number === 1 ) {
      //     this.removeClassError(this.$password);
      //   } else if ( number === 2 ) {
      //     this.removeClassError(this.$confirmPassword);
      //   }
      // }
      if (pass.length >= 8) {//validate length        
        if ( pass.match(/[a-zа-яё]/) ) {//validate letter          
          if ( pass.match(/[A-ZА-ЯЁ]/) ) {//validate capital letter            
            if ( pass.match(/\d/) ) {//validate number
              //console.log('Password is valid...');
              if (number === 1) {//for first password checking only valid
                console.log('Password is valid...');
                return true;
              } else if (number === 2) {
                if (this.passwordsIsEqual()) {
                  console.log('Passwords is valid and identical...');
                  return true;
                } else {
                  console.log('Passwords is not identical...');
                  return false;
                }
              }              
            } else {
              console.log('Please write one or more digitals...');
              return false;
            }
          } else {
            console.log('Please write one or more uppercase letter...');
            return false;
          }
        } else {
          console.log('Please write one or more letter...');
          return false;
        }
      } else {
        console.log('Please write more then 8 simbols...');
        return false;
      }
    };
    this.passwordsIsEqual = function() {
      if ( this.confirmPassword === this.password ) {
          console.log('Confirms password is equal...');
          return true;        
      } else {
        return false;
      }      
    };
    this.addClassCorrect = function(target) {
      target.removeClass(classError);
      target.addClass(classCorrect);
    };    
    this.addClassError = function(target) {
      target.removeClass(classCorrect);
      target.addClass(classError);
    };
    this.removeClassError = function(target) {
      target.removeClass(classError);
    };
    this.reset = function() {
      this.setPassword(1, null);
      this.setPassword(2, null);
      this.$password.val('');
      this.$confirmPassword.val('');
      this.$password.removeClass(classCorrect);
      this.$confirmPassword.removeClass(classCorrect);
      this.$password.removeClass(classError);
      this.$confirmPassword.removeClass(classError);
      this.$email.val('');
      this.$email.removeClass(classCorrect);
      this.$email.removeClass(classError);
    };

  }