formio-sfds
Version:
The Form.io theme for sf.gov
29 lines (26 loc) • 4.62 kB
HTML
<html lang="en">
<head>
<title>Error messages | formio-sfds examples</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/sfgov/forms.css">
</head>
<body>
<div class="formio-sfds">
<div class="container p-2">
<h1 class="h3 mb-4">
<a href="/">formio-sfds@10.0.0</a> /
Error messages
</h1>
<sfgov-form
data-form="{"components":[{"type":"fieldset","legend":"Textfield","components":[{"type":"textfield","key":"textfieldMaxLength","label":"Max length","defaultValue":"this is too long","validate":{"maxLength":10}},{"type":"textfield","key":"textfieldMaxLengthCustom","label":"Max length + custom message","defaultValue":"this is too long","validate":{"maxLength":10,"customMessage":"Custom error message"}},{"type":"textfield","key":"textfieldMaxLengthRequired","label":"Max length (required)","defaultValue":"this is too long","validate":{"required":true,"maxLength":10}},{"type":"textfield","key":"textfieldMaxLengthRequiredCustom","label":"Max length (required) custom message","defaultValue":"this is too long","validate":{"required":true,"maxLength":10,"customMessage":"Custom error message"}}]},{"type":"fieldset","legend":"Email","components":[{"type":"email","key":"emailInvalid","label":"Email (invalid)","defaultValue":"not an email"},{"type":"email","key":"emailRequiredInvalid","label":"Email (invalid + required)","defaultValue":"not an email","validate":{"required":true}},{"type":"email","key":"emailRequiredInvalidEmpty","label":"Email (invalid + required, empty)","validate":{"required":true}}]},{"type":"fieldset","legend":"Radio","components":[{"type":"radio","key":"radioRequired","label":"Radio (required)","values":[{"label":"One option","value":1},{"label":"Another option","value":2}],"validate":{"required":true}},{"type":"radio","key":"radioRequiredCustom","label":"Radio (required, custom message)","values":[{"label":"One option","value":1},{"label":"Another option","value":2}],"validate":{"required":true,"customMessage":"Please choose an option."}}]},{"type":"fieldset","legend":"Checkboxes (select boxes)","components":[{"type":"selectboxes","key":"selectboxesRequired","label":"Select boxes (required)","values":[{"label":"One option","value":1},{"label":"Another option","value":2}],"validate":{"required":true}},{"type":"selectboxes","key":"selectboxesRequiredCustom","label":"Select boxes (required, custom message)","values":[{"label":"One option","value":1},{"label":"Another option","value":2}],"validate":{"required":true,"customMessage":"Please choose an option."}}]}]}"
data-options="{"example":{"submit":true}}">
</sfgov-form>
</div>
</div>
<script src="https://unpkg.com/formiojs@4.14.8/dist/formio.full.min.js"></script>
<script src="/dist/formio-sfds.standalone.js"></script>
<script src="/dist/examples.js"></script>
</body>
</html>