form-builder-vlad v0.1.3
form-builder-vlad
Hello, Josiah Mann ! Hope this page finds you.
I'd like to discuss the possibility of continuing our partnership, and I was wondering if you would be open to communicating through Telegram or Skype. These platforms provide a convenient way for us to discuss future projects and keep our communication efficient.
Please let me know your preferred mode of communication and share your username or contact details so that we can reconnect as soon as possible. I look forward to hearing from you.
Thank you!
Best regards,
Vladimir
My Contact Details:
email: smartdev924@gmail.com telegram: https://t.me/luckycstar555 Skype: live:.cid.c8fa2151ae7436d3
$ npm install form-builder-vlad
Contribute
This code is still in its infancy, and I'd really appreciate any contributions, bug reports, or advice. Especially on the following key areas:
- Creating sensible default rendering functions that generate flexible, accessible markup. This is an early priority because without being confident that the standard markup won't change under their feet, developers will not be able to adopt the module for any sort of production use.
- Exploring write-once validation that works on the client and the server. There are some unique advantages to using the same language at both ends, let's try and make the most of it!
- Ensuring it's easy to use with existing node web frameworks. Ideally this module would integrate well with projects using any of the popular frameworks.
Contributors
Example
Creating an example registration form:
import React from "react";
import "./index.css";
import Form from "form-builder-vlad/dist/Forms/Form";
import AddCustomButtons from "form-builder-vlad/dist/AddCustomButtons";
function App() {
const [settings, setSettings] = React.useState({
type: "modal",
size: "sm:ns-max-w-lg",
anchor: "auto",
progress_on: "click-element",
show_default_buttons: true,
custom_buttons: [],
});
return (
<div
className="App"
style={{
maxWidth: "1000px",
margin: "30px auto",
}}
>
<Form
model={{
type: {
type: "select",
label: "Step Type",
options: [
{ label: "Modal", value: "modal" },
{ label: "Pointer", value: "pointer" },
],
value: settings.type,
},
size: {
type: "select",
label: "Modal Size",
options: [
{ label: "Small", value: "sm:ns-max-w-lg" },
{ label: "Medium", value: "sm:ns-max-w-xl" },
{ label: "Large", value: "sm:ns-max-w-2xl" },
{ label: "Extra Large", value: "sm:ns-max-w-3xl" },
{ label: "Full Screen", value: "sm:ns-max-w-full" },
],
value: settings.size,
logic: {
hide: [["type", "!==", "modal"]],
},
},
anchor: {
type: "select",
label: "Placement",
options: [
{ label: "Auto", value: "auto" },
{ label: "Top Left", value: "top-start" },
{ label: "Top Center", value: "top" },
{ label: "Top Right", value: "top-end" },
{ label: "Middle Right", value: "right" },
{ label: "Bottom Right", value: "bottom-end" },
{ label: "Bottom Center", value: "bottom" },
{ label: "Bottom Left", value: "bottom-start" },
{ label: "Middle Left", value: "left" },
],
value: settings.anchor,
logic: {
hide: [["type", "!==", "pointer"]],
},
},
progress_on: {
type: "select",
label: "Progress On",
options: [
{
label: "Click of the element",
value: "click-element",
},
{ label: "Next or Done button", value: "click-next" },
],
value: settings.progress_on,
},
show_default_buttons: {
type: "switch",
cast: "boolean",
label: "Show Default Buttons",
logic: {
hide: [["type", "!==", "modal"]],
},
value: settings.show_default_buttons,
},
custom_buttons: {
type: "custom",
label: "Custom Buttons",
render: (value, onChange) => {
return <AddCustomButtons value={value} onChange={onChange} />;
},
},
}}
onChange={(value) => {
console.log(value);
}}
onSubmit={(e, value) => {
e.preventDefault();
console.log(value);
}}
/>
</div>
);
}
export default App;
Supported options:
validatePastFirstError
:true
, otherwise assumesfalse
- If
false
, the first validation error will halt form validation. - If
true
, all fields will be validated.
- If
Form object
Attributes
fields
- Object literal containing the field objects passed to the create function
form.handle(req, callbacks)
Inspects a request or object literal and binds any data to the correct fields.
form.bind(data)
Binds data to correct fields, returning a new bound form object.
form.toHTML(iterator)
Runs toHTML on each field returning the result. If an iterator is specified, it is called for each field with the field name and object as its arguments, the iterator's results are concatenated to create the HTML output, allowing for highly customised markup.
Bound Form object
Contains the same methods as the unbound form, plus:
Attributes
data
- Object containing all the parsed data keyed by field namefields
- Object literal containing the field objects passed to the create function
form.validate(callback)
Calls validate on each field in the bound form and returns the resulting form object to the callback.
form.isValid()
Checks all fields for an error attribute. Returns false if any exist, otherwise returns true.
form.toHTML(iterator)
Runs toHTML on each field returning the result. If an iterator is specified, it is called for each field with the field name and object as its arguments, the iterator's results are concatenated to create the HTML output, allowing for highly customised markup.
Field object
Attributes
label
- Optional label text which overrides the defaultrequired
- Boolean describing whether the field is mandatoryvalidators
- An array of functions which validate the field datawidget
- A widget object to use when rendering the fieldid
- An optional id to override the defaultchoices
- A list of options, used for multiple choice fields (see the field.choices section below)cssClasses
- A list of CSS classes for label and field wrapperhideError
- if true, errors won't be rendered automaticallylabelAfterField
- if true, the label text will be displayed after the field, rather than beforeerrorAfterField
- if true, the error message will be displayed after the field, rather than beforefieldsetClasses
- for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldsetlegendClasses
- for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldset's legend
field.choices
The choices property is used for radio, checkbox, and select fields. Two formats are supported and in case of select fields the format can be nested once to support option groups.
The first format is based on objects and is easy to write. Object keys are treated as values and object values are treated as labels. If the value is another object and nesting is supported by the widget the key will be used as label and the value as nested list.
The second format is array-based and therefore ordered (object keys are unordered by definition). The array should contain arrays with two values the first being the value and the second being the label. If the label is an array and nesting is supported by the widget the value will be used as label and the label as nested list.
Both formats are demonstrated below: