Submodule 9.3: Form validation

1. The idea!

The main reason why we use JavaScript in forms is to enable us to perform accurate validation of the user input. It is important to ensure that the information entered is in the correct format and complete. Commonly forms have required fields, fields that need an email address and fields where the user has to enter twice matching information ( ie password fields). In all these cases, it is important that the user is informed immediately about the requirements and whether he has fulfill them, rather than after submitting the form.

HTML5 it is very useful for form validation, however, there are some fields where JavaScript is required.

2. Our file, the default HTML validation

The HTML provides input="text" validation, requires the field to be filled with at least one character.

The HTML provides input="email" validation, requires the "@" character, a character before and a character after this.

The textarea can be submitted empty, even if it is required.

Exercise

1. Open the file exersice09.2.html in your browser and experiment with the existing validation.

3. Enriching HTML validation

We have added the attribute minlength="4" in the input="text" and the "textarea" fields.

Exercise

1. Open the file exersice09.2.html in your editor and save it as exersice09.3.03.htmlin the folder "Exercises".
2. Add the attribute minlength="4" in the input="text" and the "textarea" fields.
3. Save the file and preview it in your browser. Experiment with the 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

5. The input type="text" element

The below code creates the validation for the input type="text". 

It displays the appropriate png icons and the appropriate message in the span area with id  " firstnameInfo".

The HTML code: 

<div class = "required">
  <label for="firstname">First name:</label>
  <input type="text" name="firstname" id="firstname" class = "required" 
    placeholder="Your first name goes here" 
    autofocus="autofocus" minlength="4" required /> 
  <span id="firstnameInfo"></span>
</div>

and the JavaScript code:

<script>
  var myfirsname = document.getElementById("firstname");
  var myfirstnameInfo = document.getElementById("firstnameInfo");
  myfirsname.oninput = function () {
  if (!this.validity.valid) {myfirsname.style.backgroundImage=     "url(images/invalid.png) " ;
    myfirsname.style.backgroundRepeat= " no-repeat";
    myfirsname.style.backgroundPosition= " right top";
    myfirstnameInfo.innerHTML = "Your name is too small."
  }
  else {
    myfirsname.style.backgroundImage= "url(images/valid.png) " ;
    myfirsname.style.backgroundRepeat= " no-repeat";
    myfirsname.style.backgroundPosition= " right top";
    myfirstnameInfo.style.display = "none";
  }
}
</script>

will create an input displayed as: 

6. The input type="email" element

The below code creates the validation for the input type="email".

According to user's input, it displays the appropriate border color. It also displays the appropriate message in the span area with id "mailInfo".

The HTML code:

<div class = "required">
  <label for="mail">Your email:</label>
  <input type="email" name="mail" id="mail" 
      placeholder="Your email goes here" required />
  <span id="mailInfo"></span>
 </div>

and the JavaScript code:

<script>
  var mymail = document.getElementById("mail");
   var mymailInfo = document.getElementById("mailInfo");
  mymail.oninput = function () {
     if (!this.validity.valid) {
       mymail.style.border="solid 3px red";
       mymailInfo.innerHTML="Your email must be in the correct format. "
     }
     else {
       mymail.style.borderColor = "green";
       mymailInfo.style.display = "none"
     }
   }
</script>

will create an input displayed as: 

7. The textarea element

The below code creates the validation for the textarea.

According to user's input, it displays the appropriate border color. It also displays the appropriate message in the span area with id "feedbackInfo".

The HTML code:

<div class = "required">
  <p>Please enter any feedback you have.</p>
  <textarea name="feedback" id="feedback" 
     placeholder ="Your feedabck goes here" 
     rows="3" cols="60" minlength="4" required></textarea>
  <span id="feedbackInfo" ></span>
</div>

and the JavaScript code:

<script>
  var myfeedback = document.getElementById("feedback");
  var myfeedbackInfo = document.getElementById("feedbackInfo");
  myfeedback.oninput = function () {
    if (!this.validity.valid) {
      myfeedback.style.border="solid 3px red";
      myfeedbackInfo.innerHTML="Your feedback must include at least 4 characters."
    }
    else {
      myfeedback.style.borderColor = "green";
      myfeedbackInfo.style.display = "none"
    }
}
</script>

will create a textarea displayed as:

8. Exercise

For more information: https://www.w3schools.com/js/js_validation_api.asp

Exercise

1. Download the folder valid.zip and extract/unzip it in both the folder "exercises/images" and in the folder "chocolate/images". This zip folder includes the valid.png and invalid.png icons.
2. Open your editor, create a new file and save it as exersice09.3.html in the folder "Exercises".
3. Copy the following code and paste it into the new file. This code includes everything that we have explained in this module.
4. Save the file. Is everything ok? You can experiment either with the Javascript or the HTML(e.g add a new form element).
   

View code: