Form validation allows the user to understand what they entered is incorrect, and how they can correct it to proceed.

There are two methods which are a summary, and an inline validation.

Form summary validation

This is used when there can be multiple errors on the page preventing the user to re-check their submitted information on a step.
This should be presented at the top of the form and in focus for screen readers.

Form inline validation

This is used when there is a field in question that is incorrect/has an error. This can be used in conjunction with the form summary method.
This is to highlight the field in question that is incorrect.

Output
HTML

The form could not be submitted for the following reasons

Enter your first name

Enter a valid email address

First name Enter in your first name

Last name

Email address Enter in a valid email address

                            
                            <div class="form-validation-error">
<p class="validation__heading heading3">The form could not be submitted for the following reasons</p>
<p><span class=""><a href="#firstname">Enter your first name</a></span></p>
<p><span class=""><a href="#email">Enter a valid email address</a></span></p>
</div>
<div class="form__control form__error">
<label class="form__label" for="firstname">First name</label><span class="form__error--inline-message"><span class="visually-hidden">Error:</span> Enter in your first name</span><input type="text" class="form__input form__input--error" id="firstname"></div>
<div class="form__control"><label class="form__label" for="lastname" >Last name</label><br><input type="text" class="form__input" id="lastname">
</div>
<div class="form__control form__error"><label class="form__label" for="email">Email address</label><span class="form__error--inline-message"><span class="visually-hidden">Error:</span> Enter in a valid email address</span><input type="text" class="form__input form__input--error" id="email"></div>

Portal Code example

Form validation can either be setup as either a group collection message at the top of the screen to highlight the errors, or inline error to the form field
To add validation, you can use custom javascript as documented by Microsoft
You’ll want to add the metadata as well to make fields a required field.

Output
HTML

Form validation js required

                        
                        <h1>Form validation js required</h1>

<script type="text/javascript">
function addCustomPageValidators() {
   // Check if the User has selected the number of bins required
   if (typeof (Page_Validators) == 'undefined') return;
   // Create new validator
   var newValidator = document.createElement('span');
   newValidator.style.display = "none";
   newValidator.id = "binstodeliverValidator";
   newValidator.controltovalidate = "civ_binstodeliver";
   newValidator.errormessage = "<p>Please specify the number of bins required</p>";
   newValidator.validationGroup = "";
   newValidator.initialvalue = "";
   newValidator.evaluationfunction = function () {
      var binsRequired = $('#civ_hasenoughbins_0').prop("checked");
      if (binsRequired == true) {
        if ($('#civ_binstodeliver').val() == "") {
            return false; 
        }
        else 
        {
            return true;
        }
      }
      return true;
   };
  
   // Add the new validator to the page validators array:
   Page_Validators.push(newValidator);  
}
</script>