simple task

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<form al-on.submit="send()">
  <div>
     <label>Name</label>
     <input type="text" al-value="name" al-class="error: name.length < 5"/>
  </div>
  <div>
     <label>Tel</label>
     <input type="text" al-value="tel" al-class="error: !isNumber(tel)"/>
  </div>
  <div>
     <label>Message</label>
     <textarea al-value="message" al-class="error: !message"></textarea>
  </div>
  <div>
    <input type="submit" al-enable="isValid()"/>
  </div>
</form>

CSS

div { margin: 0 0 .5em 0; display: flex; }
div label { width: 7em; }
input[type="text"], textarea { width: 20em; }
.error { border: 3px solid red; }

JavaScript

var vm = {
	name: 'Vasya',
  tel: 2128506,
  message: 'Hello',
  
  isNumber: function(value) {
  	return value && Number(value) == value
  },
  isValid: function() {
  	return this.name.length > 4
    	&& this.isNumber(this.tel)
      && this.message
  },
  send: function() {
  	setTimeout(() =>
      {
        // reset
        this.name = '';
        this.tel = '';
        this.message = '';
        this.$scan();
      }, 10);    
  }
}

alight.bootstrap('form', vm); // bind vm to form