title: Validation focus and error on the label text and input border
body: <p>I'm new to vue js and still trying to figure out how to do it in a correct way.</p>
  
  <p>I have input validation, when it's empty and click outside the input, it shows an error or red color on the border and label input. When it's onfocus, click inside the input or typing text, the border and label text becomes blue.</p>
  
  <p>I do this with javascript and it works. (code snippet below)</p>
  
  <p>I tried using vue to do that, but when I click 1 input, the other input also become focus.
  (code snippet below)</p>
  
  <p>My question is it possible to code it using vue instead of vanila?</p>
  
  <p>VUE</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>data: function() {
      return {
        focusBlue: true
      }
  }
  
  computed: {
      inputFocus: function(){
        return{
          focus_blue: this.focusBlue
        }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.focus_blue{
    border: 1px solid #4990e2 !important;
  }
  
  .test1 input {
    background-color: transparent;
    border: 1px solid #9b9b9b;
    padding: 10px;
    color: #ffffff;
  }
  
  .test1 input:focus {
    outline: none;
  }
  
  .test1 {
    display: flex;
    flex-direction: column;
    width: 48%;
    margin-top: 25px;
  }
  
  .test2{
    color: #9b9b9b;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test1"&gt;
          &lt;label class="test2"&gt;First Name *&lt;/label&gt;
          &lt;input type="text" @click="focusBlue = !focusBlue" :class="inputFocus"&gt;
        &lt;/div&gt;
        &lt;div class="test1"&gt;
          &lt;label class="test2"&gt;First Name *&lt;/label&gt;
          &lt;input type="text" @click="focusBlue = !focusBlue" :class="inputFocus"&gt;
        &lt;/div&gt;
        
        &lt;div class="test1"&gt;
          &lt;label class="test2"&gt;First Name *&lt;/label&gt;
          &lt;input type="text" @click="focusBlue = !focusBlue" :class="inputFocus"&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JAVASCRIPT</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> userInputValidation: function() {
        const userInput = document.querySelectorAll(".inputJs");
        const userLabel = document.querySelectorAll(".guestlist-form-label");
  
        const textArea = document.querySelector(".test");
  
        userInput.forEach(function(input, index) {
          const labelInput = userLabel[index];
          const errorClass = "has-error";
          const blueClass = "has-blue";
          input.addEventListener("blur", function() {
            var hasError = input.value === "";
            input.classList.toggle(errorClass, hasError);
            labelInput.classList.toggle(errorClass, hasError);
            labelInput.classList.remove(blueClass);
            console.log("okay");
          });
          input.addEventListener("focus", function() {
            input.classList.remove(errorClass);
            labelInput.classList.remove(errorClass);
            labelInput.classList.add(blueClass);
            console.log("okay");
  
            textArea.classList.add(blueClass);
          });
  
        });
      },</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.guestlist-form-wrapper-textarea {
    width: 100%;
    margin-top: 25px;
  }
  
  .guestlist-textarea {
    background-color: transparent;
    text-indent: 5px;
    height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
  }
  
  .guestlist-form-label.has-blue {
    color: #4990e2;
  }
  
  .guestlist-form-label.has-error {
    color: #d04843;
  }
  
  .inputJs.has-error {
    border: 1px solid #d04843;
  }
  
  .guestlist-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 62%;
  }
  
  .guestlist-form-wrapper-input {
    display: flex;
    flex-direction: column;
    width: 48%;
    margin-top: 25px;
  }
  
  .guestlist-form-label {
    color: #9b9b9b;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
  }
  
  .guestlist-form-wrapper-input input {
    background-color: transparent;
    border: 1px solid #9b9b9b;
    padding: 10px;
    color: #ffffff;
  }
  
  .guestlist-form-wrapper-input input:focus,
  .guestlist-textarea:focus {
    outline: none;
    border: 1px solid #4990e2;
    color: #4990e2;
    -webkit-box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.2);
    box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.4);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div class="guestlist-form-wrapper-input"&gt;
            &lt;label class="guestlist-form-label"&gt;First Name *&lt;/label&gt;
            &lt;input type="text" class="inputJs"&gt;
          &lt;/div&gt;
          &lt;div class="guestlist-form-wrapper-input"&gt;
            &lt;label class="guestlist-form-label"&gt;Last Name *&lt;/label&gt;
            &lt;input type="text" class="inputJs"&gt;
          &lt;/div&gt;
          &lt;div class="guestlist-form-wrapper-input"&gt;
            &lt;label class="guestlist-form-label"&gt;Email *&lt;/label&gt;
            &lt;input type="email" class="inputJs"&gt;
          &lt;/div&gt;
          &lt;div class="guestlist-form-wrapper-input"&gt;
            &lt;label class="guestlist-form-label"&gt;Phone *&lt;/label&gt;
            &lt;input type="tel" class="inputJs"&gt;
          &lt;/div&gt;
  
          
  
          &lt;div class="guestlist-form-wrapper-textarea"&gt;
            &lt;label class="guestlist-form-label test"&gt;Booking note *&lt;/label&gt;
            &lt;textarea
              class="guestlist-textarea inputJs"
              placeholder="Type your message"
              name="textarea"
              id="textarea"
              cols="30"
              rows="10"
            &gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>