Highlight required form fields

Q: I want to style required form fields with no value

A: Use the required form field flag and style your fields as needed.

  1. Set required flag on form fields:

    Copy
    1
    2
    3
    4
    5
    6
    7
    8
    
    // 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)
    

    PSPDFKit.FormFields.TextFormField, PSPDFKit.FormFields.ComboBoxFormField and PSPDFKit.FormFields.ListBoxFormField with the required flag set 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:

    1
    2
    3
    4
    
    const instance = await PSPDFKit.load({
        ...configuration,
        styleSheets: ['https://example.com/my-stylesheet.css'],
    })
    
  3. Use :invalid pseudo-class to mark empty required fields:

    Copy
    my-stylesheet.css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <!-- 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