Submodule 9.3: Form validation

4. Adding JavaScript features

We will use JavaScript to add more functionality to our form. 

Here we will learn to use the event "oninput" to check user's input.

Also, we will use the property this.validity.valid which every time the user writes something on the field, checks whether he has fulfilled the requirements. Using that, we are able to give immediate information to the user and visualization.

myid.oninput = function () {
  if (!this.validity.valid) {
    /*do this*/
  }
  else {
    /*do that*/
  }
}

When the input="text" is invalid, the form will display the appropriate icon and message 

whereas, when this becomes valid, an alternative icon will be displayed and the message will disappear

When the input="email" is invalid, it will have the appropriate border color and message 

whereas, when this becomes valid, the border color will change and the message will disappear

When the textarea is invalid, it will have the appropriate border color and message 

whereas, when this becomes valid, the border color will change and the message will disappear