Highlight Required Form Fields

If you want to style required form fields with no value, use the required form field flag and style your fields as needed. This process is outlined below.

1. Set the required flag on form fields:

   // Retrieve all form fields.
   const formFields = await instance.getFormFields();
   
   // Set the `required` property for all form fields.
   const updatedFields = formFields.map((formField) =>
     formField.set("required", true)
   );
   
   // Update the form fields.
   await instance.update(updatedFields);

   When the required flag is set on PSPDFKit.FormFields.TextFormField, PSPDFKit.FormFields.ComboBoxFormField, and PSPDFKit.FormFields.ListBoxFormField, they will be rendered with the PSPDFKit-Annotation-Widget-Required CSS class and will have the HTML required attribute set.

2. Use a custom stylesheet to provide your custom CSS:

   const instance = await PSPDFKit.load({
     ...configuration,
     styleSheets: ["https://example.com/my-stylesheet.css"]
   });

3. Use an :invalid pseudo-class to mark empty required fields:

   <!-- This matches empty required fields. -->
   .PSPDFKit-Annotation-Widget-Required:invalid {
       border: 1px solid red;
   
   }
   
   <!-- This matches filled required fields. -->
   .PSPDFKit-Annotation-Widget-Required {
       border: 1px solid green;
   }

This has been tested with PSPDFKit for Web 2020.6.4