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.
-
Set
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)
PSPDFKit.FormFields.TextFormField
,PSPDFKit.FormFields.ComboBoxFormField
andPSPDFKit.FormFields.ListBoxFormField
with therequired
flag set will be rendered with thePSPDFKit-Annotation-Widget-Required
CSS class and will have the HTMLrequired
attribute set. -
Use a custom stylesheet to provide your custom CSS:
const instance = await PSPDFKit.load({ ...configuration, styleSheets: ['https://example.com/my-stylesheet.css'], })
-
Use
:invalid
pseudo-class to mark empty required fields:<!-- This matches empty required fields. --> .PSPDFKit-Annotation-Widget-Required:invalid { border: 28 } <!-- This matches filled required fields. --> .PSPDFKit-Annotation-Widget-Required { border: 1px solid green; }
This has been tested with PSPDFKit for Web 2020.6.4