title: javascript .replace and .trim not working in vuejs
body: <p>Hey guys so I wrote a vueapp and Im trying to use functions like .trim() and .replace to sanitize the data that comes into the form. However it doesnt seem to be working. I need those to validate the form. For example in almost all of the fields I want to trim out spaces and for the phoneNumber field I want to replace "(" and ")" and "-" with an empty string. as they type them. 
  heres the code:</p>
  
  <pre><code>&lt;?php ob_start();
  session_start();
  
  include('head.php');
  include('header.php');
  ?&gt;
      &lt;div id="signUpFormContainer"&gt;
    &lt;div id="signUpForm"&gt;
  
        &lt;!--USERNAME--&gt;
      &lt;div class="inputDiv"&gt;
        &lt;p v-show="usernameLength==true &amp;&amp; usernameHasCap==true &amp;&amp; usernameHasNum==true &amp;&amp; userexist==false"&gt;Username* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
          &lt;p v-show="userexist == true"&gt;Username* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Username Already Exists&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
                 &lt;p v-show="userexist==true" class="error"&gt;We are sorry but that username already exists.&lt;/p&gt;
          &lt;p v-show="usernameLength==false &amp;&amp; userName!='' &amp;&amp; sub!=1 || usernameHasCap==false &amp;&amp; sub!=1 &amp;&amp; userName!='' &amp;&amp; userexist==false || usernameHasNum==false &amp;&amp; sub!=1 &amp;&amp; userName!='' &amp;&amp; userexist==false"&gt;Username* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Username must be at least 8 characters, Have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='userName=="" &amp;&amp; sub!="1" &amp;&amp; userexist==false'&gt;Username* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Username must be at least 8 characters, Have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='sub==1 &amp;&amp; usernameLength==false &amp;&amp; userexist==false || sub==1 &amp;&amp; usernameHasNum==false &amp;&amp;  userexist==false || sub==1 &amp;&amp; usernameHasCap==false &amp;&amp; userexist==false'&gt;Username* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Username must be at least 8 characters, have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
  
        &lt;input v-model="userName" placeholder="Username" v-on:focus="showusernamerequirements"&gt;
                   &lt;ul v-show="disunamer==true"&gt;
            &lt;li v-show="usernameLength==false || userName==''"&gt;Must contain at least 8 characters&lt;/li&gt;
               &lt;li v-show="usernameHasCap==false"&gt;Must contain capital letter&lt;/li&gt;
               &lt;li v-show="usernameHasNum==false"&gt;Must contain number&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--END USERNAME--&gt;
  
        &lt;!--PASSWORD--&gt;
      &lt;div class="inputDiv"&gt;
        &lt;p v-show='passwordLengthMet==true &amp;&amp; passwordHasCap==true &amp;&amp; passwordHasNum==true'&gt;Password* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
          &lt;p v-show='passwordLengthMet==false &amp;&amp; password!="" &amp;&amp; sub!=1 || passwordHasCap==false &amp;&amp; sub!=1 &amp;&amp; password!="" || passwordHasNum==false &amp;&amp; sub!=1 &amp;&amp; password!="" '&gt;Password* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Password must be at least 8 characters, Have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='password=="" &amp;&amp; sub!="1"'&gt;Password* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Password must be at least 8 characters, Have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='sub==1 &amp;&amp; passwordLengthMet==false || sub==1 &amp;&amp; passwordHasNum==false || sub==1 &amp;&amp; passwordHasCap==false'&gt;Password* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Password must be at least 8 characters, have a capital letter and contain a number&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
           &lt;input type="password" v-model="password" placeholder="Password" v-on:focus="showpasswordrequirements"&gt;
           &lt;ul v-show="dispassr==true"&gt;
            &lt;li v-show="passwordLengthMet==false || password==''"&gt;Must contain at least 8 characters&lt;/li&gt;
               &lt;li v-show="passwordHasCap==false"&gt;Must contain capital letter&lt;/li&gt;
               &lt;li v-show="passwordHasNum==false"&gt;Must contain number&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--END PASSWORD--&gt;
  
        &lt;!--PASSWORDS MATCH--&gt;
      &lt;div class="inputDiv"&gt;
        &lt;p v-show="passwordsMatch==true &amp;&amp; password!=''"&gt;Confirm Password* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Passwords Match&lt;/p&gt;
           &lt;p v-show="passwordsMatch==false &amp;&amp; password!='' || sub==1 &amp;&amp; confirmPassword=='' || confirmPassword!='' &amp;&amp; password==''"&gt;Confirm Password* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Please make sure passwords match&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
            &lt;p v-show="password=='' &amp;&amp; sub==0 &amp;&amp; confirmPassword==''"&gt;Confirm Password* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Confirm your password please&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
       &lt;input type="password" v-model="confirmPassword" placeholder="Confirm Password" v-on:focus="showconfirmpasswordrequirements"&gt;
          &lt;ul v-show="disconfr==true"&gt;
          &lt;li class="blue" v-show="passwordsMatch==false"&gt;Please be sure your passwords match&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--END PASSWORDS MATCH--&gt;
  
        &lt;!--FIRSTNAME--&gt;
      &lt;div class="inputDiv"&gt;
        &lt;p v-show="validFirstname==true"&gt;First name* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
        &lt;p v-show="validFirstname==false &amp;&amp; sub==1"&gt;First Name* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Please enter your firstname&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='validFirstname==false &amp;&amp; sub!="1"'&gt;First Name* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Please enter a firstname&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;input v-model="firstName" placeholder="Firstname" v-on:focus="showfirstnamerequirements"&gt;
          &lt;ul v-show='disfnamer==true'&gt;
          &lt;li v-show="validFirstname==false"&gt;Please enter a firstname&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--END FISTNAME--&gt;
  
        &lt;!--LASTNAME--&gt;
      &lt;div class="inputDiv"&gt;
        &lt;p v-show="validLastname==true"&gt;Last Name* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
        &lt;p v-show="validLastname==false &amp;&amp; sub==1"&gt;Last Name* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Please enter your lastname&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show='validLastname==false &amp;&amp; sub!="1"'&gt;Last Name* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Please enter a lastname&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;input v-model="lastName" placeholder="Last name" v-on:focus="showlastnamerequirements"&gt;
          &lt;ul v-show='dislnamer==true'&gt;
          &lt;li v-show="validLastname==false"&gt;Please enter a lastname&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--END LASTNAME--&gt;
  
        &lt;!--EMAIL--&gt;
      &lt;div class="inputDiv"&gt;
          &lt;p v-show="validEmail==true"&gt;Email* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
          &lt;p v-show="validEmail==false &amp;&amp; email!=='' || email=='' &amp;&amp; sub==1"&gt;Email* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Please enter a valid email&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show="email=='' &amp;&amp; sub==0"&gt;Email* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Please enter a valid email&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
        &lt;input v-model="email" placeholder="jchang@example.com" v-on:focus="showemailrequirements"&gt;
          &lt;ul v-show='disemailr==true'&gt;
          &lt;li v-show="validEmail==false"&gt;Please enter a valid email&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
          &lt;!--END EMAIL--&gt;
  
          &lt;!--PHONE --&gt;
          &lt;div class="inputDiv"&gt;
          &lt;p v-show="phoneLength==true &amp;&amp; phoneHasNum==true &amp;&amp; phoneNumber!=''"&gt;Phone* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
          &lt;p v-show="phoneLength==false &amp;&amp; phoneNumber!='' || phoneHasNum==false &amp;&amp; phoneNumber!='' || phoneNumber=='' &amp;&amp; sub==1"&gt;Phone* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Phone Number must have at least 10 numbers and have no letters, parenthis or dashes&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;p v-show="phoneNumber=='' &amp;&amp; sub==0"&gt;Phone* &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Phone Number must have at least 10 numbers and have no letters it cannot contain parenthis or dashes&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
          &lt;input v-model="phoneNumber" placeholder="Phone Number 1234567890" v-on:focus="showphonenumberrequirements" id="phoneNumber"&gt;
          &lt;ul v-show="disphoner==true"&gt;
          &lt;li v-show="phoneLength==false"&gt;Phone number must be 10 numbers long&lt;/li&gt;
          &lt;li v-show="phoneHasNum==false || phoneNumber==''"&gt; Phone number must contain only numbers&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
          &lt;!--END PHONE--&gt;
  
          &lt;!--COMPANY NAME--&gt;
          &lt;div class="inputDiv"&gt;
              &lt;p v-show="validCompanyName==true"&gt;Company Name* &lt;i class="fa fa-check-circle success"&gt;&lt;/i&gt; Valid&lt;/p&gt;
              &lt;p v-show="validCompanyName==false &amp;&amp; companyName!='' || companyName==false &amp;&amp; companyName=='' &amp;&amp; sub==1"&gt;Company Name* &lt;i class="fa fa-exclamation-circle tooltip error"&gt;&lt;span class="tooltiptext"&gt;Please enter your company name&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;p v-show="companyName=='' &amp;&amp; sub==0"&gt;Company Name*  &lt;i class="fa fa-question-circle tooltip" style="color:darkblue;"&gt;&lt;span class="tooltiptext blue" style="background-color:darkblue;"&gt;Please enter your company name&lt;/span&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;input v-model="companyName" placeholder="Company Name" v-on:focus="showcompanynamerequirements"&gt;
              &lt;ul v-show="discompr==true"&gt;
              &lt;li v-show="validCompanyName==false"&gt;Please enter your company name&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/div&gt;
          &lt;!--END COMPANY NAME--&gt;
  
      &lt;div class="inputButton"&gt;
        &lt;input v-on:click="makeAccount" id="addButton" type="button" value="Sign Up"&gt;&lt;/input&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;div id="footerContainer"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var app = new Vue({
    el: '#signUpForm',
    data: {
      userName: '',
      password: '',
      confirmPassword: '',
      firstName: '',
      lastName: '',
      email: '',
      sub: '',
      dispassr: '',
      disconfr: '',
      disfnamer: '',
      dislnamer: '',
      disemailr: '',
      disunamer: '',
      disphoner: '',
      discompr: '',
      phoneNumber: '',
      companyName: '',
      userexist: ''
    },
    computed: {
      passwordsMatch: function() {
        if(this.password == this.confirmPassword &amp;&amp; this.confirmPassword.trim()!='') {
          return true;
        } else {
          return false;
        }
      },
      passwordLengthMet: function() {
        if(this.password.trim().length &gt;= 8) {
          return true;
        } else {
          return false;
        }
      },
      passwordHasCap: function(){
        if(/[A-Z]/.test(this.password)){return true;} else{return false;}         
      },
      passwordHasNum: function(){
        if(/[\d]/.test(this.password)){return true;} else{return false;}  
      },
      validEmail: function() {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (!reg.test(this.email)) {
          return false;
        }
        return true;
      },
        validLastname: function() {
            if(this.lastName.trim().length&lt;1){return false;} else {return true;}
        },
        validFirstname: function() {
         if(this.firstName.trim().length&lt;1){return false;} else{return true;}   
        },
        usernameLength: function(){
            if(this.userName.trim().length&gt;=8){return true;} else{return false;}
        },
        usernameHasCap: function(){
          if(/[A-Z]/.test(this.userName)){return true;} else{return false;}
        },
        usernameHasNum: function(){
        if(/[\d]/.test(this.userName)){return true;} else{return false;}  
      },
        validCompanyName: function(){
            if(this.companyName.trim().length&lt;1){return false;} else{return true;}
        },
        phoneHasNum: function(){
            this.phoneNumber.replace("(","");
            this.phoneNumber.replace(")","");
            this.phoneNumber.replace("-","");
            if(isNaN(this.phoneNumber)){return false;} else {return true;}
        },
        phoneLength: function(){
            if(this.phoneNumber.trim().length==10){return true;} else{return false;}
        }
    },
    created: function() {
        this.userexist=false;
    },
    watch: {
    },
    methods: {
      makeAccount: function() {
          this.sub=1;
        if(this.usernameLength &amp;&amp; this.usernameHasCap &amp;&amp; this.usernameHasNum &amp;&amp; this.validFirstname &amp;&amp; this.validLastname &amp;&amp; this.validEmail &amp;&amp; this.passwordHasCap &amp;&amp; this.passwordHasNum &amp;&amp; this.passwordLengthMet &amp;&amp; this.passwordsMatch &amp;&amp; this.validCompanyName &amp;&amp; this.phoneNumber!='' &amp;&amp; this.phoneHasNum &amp;&amp; this.phoneLength) {
          var jsonString = JSON.stringify({
            userName: this.userName,
            firstName: this.firstName,
            lastName: this.lastName,
            password: this.password,
            email: this.email,
            phoneNumber: this.phoneNumber,
            companyName: this.companyName
          });
          $.ajax({
            url: 'makeAccount.php',
            dataType: 'json',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: jsonString,
              error: function(data){
                alert('error');
                  window.location.href='error.php';
              },
            success: function(data){
              console.log(data);
                alert('success');
                this.userexist=data.userexist;
                if(this.userexist==false){window.location.href='successfullycreated.php?userName='+this.userName;}
            }.bind(this)
          });
      }
      },
        showpasswordrequirements: function(){
            this.sub=0;
            this.dispassr=true;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=false;
            this.disphoner=false;
            this.discompr=false;
        },
        showconfirmpasswordrequirements: function(){
            this.sub=0;
            this.dispassr=false;
            this.disconfr=true;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=false;
            this.disphoner=false;
            this.discompr=false;
        },
        showfirstnamerequirements: function(){
            this.sub=0;
            this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=true;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=false;
            this.disphoner=false;
            this.discompr=false;
        },
        showlastnamerequirements: function(){
            this.sub=0;
            this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=true;
            this.disemailr=false;
            this.disunamer=false;
            this.disphoner=false;
            this.discompr=false;
        },
        showemailrequirements: function(){
            this.sub=0;
            this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=true;
            this.disunamer=false;
            this.disphoner=false;
            this.discompr=false;
        }, 
        showusernamerequirements: function(){
            this.sub=0;
            this.userexist=0;
            this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=true;
            this.disphoner=false;
            this.discompr=false;
        }, 
        showphonenumberrequirements: function(){
            this.sub=0;
            this.disphoner=true;
             this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=false;
            this.discompr=false;
      },
        showcompanynamerequirements: function(){
            this.sub=0;
            this.disphoner=false;
             this.dispassr=false;
            this.disconfr=false;
            this.disfnamer=false;
            this.dislnamer=false;
            this.disemailr=false;
            this.disunamer=false;
            this.discompr=true;
        }
      }
    });
  
  &lt;/script&gt;
  &lt;?php include('foot.php');?&gt;
  </code></pre>