Vue

by Sigma90

HTML

<main id="app">
    <div v-if="!sent">
      <h1>Fake Newsletter subscription form</h1>
      <form method="GET" action="demo.html" @submit.prevent="submitForm()">
        <fieldset>
          <label for="name">Your name</label>
          <input type="text" id="name" name="name" value="" autocomplete="off" v-model="formData.name" />
        </fieldset>
        <fieldset>
          <label for="name">Your email</label>
          <input type="email" id="email" name="email" value="" autocomplete="off" v-model="formData.email" />
        </fieldset>
        <fieldset>
          <label for="consent">By checking this box you agree to some sort of privacy policy.</label>
          <input type="checkbox" id="consent" name="consent" value="1" :checked="formData.consent" @change="formData.consent = !formData.consent" />
        </fieldset>
        <fieldset>
          <label for="consent">And by checking this box you agree to something else.</label>
          <input type="checkbox" id="other" name="other" value="1" v-model="formData.other" />
        </fieldset>
        <div v-if="inputError && !(formData.name && formData.email && formData.consent && formData.other)">
          <p style="color: red;">
            Please verify that you filled all form fields and checked all boxes. Missing: {{ (this.formData.name ? '' : ' Name ') + (this.formData.email ? '' : ' Email ') + (this.formData.consent ? '' : ' Terms-Consent ') + (this.formData.other ? '' : ' Other-Consent ') }}
          </p>
        </div>
        <input type="submit" id="submitBtn" value="Subscribe" @click.prevent="submitForm()" />
      </form>
    </div>
    <div v-if="sent">
      <h1>Fake form submission successful</h1>
      <p>No data was processed whatsoever because this doesn't run server-side.</p>
        <p>Here's what JS could figure out what was passed, though:</p>
        <dl>
          <dt><strong>Name:</strong></dt>
          <dd>{{ formData.name }}</dd>
          <dt><strong>Email:</strong></dt>
 ...

CSS

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: '#app',
  data: {
    sent: false,
    inputError: false,
    formData: {
      name: '',
      email: '',
      consent: false,
      other: false
    }
  },
  methods: {
    submitForm: function () {
      if (this.formData.name && this.formData.email && this.formData.consent && this.formData.other) {
      	this.sent = true;
        this.inputError = false;
      } else {
      	this.sent = false;
        this.inputError = true;
      }
    },
    clearForm: function () {
      this.formData.name = '';
      this.formData.email = '';
      this.formData.consent = false;
      this.formData.other = false;
      this.sent = false;
      this.inputError = false;
    }
  }
});

window.runTest = function(){
	// Simulated Regression Test
  const name = document.getElementById('name');
  const mail = document.getElementById('email');
  const cons = document.getElementById('consent');
  const othr = document.getElementById('other');
  const subm = document.getElementById('submitBtn');
  name.value = 'The Dude';
  name.dispatchEvent(new Event('input'));
  mail.value = '[email protected]';
  mail.dispatchEvent(new Event('input'));
  cons.dispatchEvent(new Event('change'));
  othr.dispatchEvent(new Event('change'));
  // we need to give Vue some time to properly react to the input changes before we trigger the last step
  setTimeout(function(){
  	subm.dispatchEvent(new Event('click'));
  }, 128);
};