Gathering detailed insights and metrics for @egodesign/form
Gathering detailed insights and metrics for @egodesign/form
Gathering detailed insights and metrics for @egodesign/form
Gathering detailed insights and metrics for @egodesign/form
Lightweight, dependency-free JavaScript library for comprehensive form validation and submission. Customize validation rules with ease and seamlessly integrate into any vanilla project.
npm install @egodesign/form
Typescript
Module System
Node Version
NPM Version
68
Supply Chain
99.3
Quality
85.9
Maintenance
100
Vulnerability
100
License
Updated on 30 Sept 2024
Minified
Minified + Gzipped
JavaScript (100%)
Cumulative downloads
Total Downloads
Last day
0%
Compared to previous day
Last week
1,100%
Compared to previous week
Last month
-58.3%
Compared to previous month
Last year
51%
Compared to previous year
Lightweight, dependency-free JavaScript library for comprehensive form validation and submission. Customize validation rules with ease and seamlessly integrate into any vanilla project.
npm install @egodesign/form
or
yarn add @egodesign/form
EgoForm
class into your file and create as many instances as needed.1import EgoForm from '@egodesign/form'; 2 3const myForm = new EgoForm({ 4 element: document.getElementById('myForm'), 5 submitType: 'fetch', 6 debug: true, 7 submitDataFormat: 'formData', 8 requestHeaders: {}, 9 fieldGroups: { 10 phone_numbers: [ 11 'phone', 12 'mobile' 13 ] 14 }, 15 serializerIgnoreList: ['ignore'], 16 classes: { 17 requiredField: '--required', 18 requiredIfFilledField: '--required-if-filled', 19 fieldHasError: '--has-error', 20 controlHasError: 'is-danger', 21 hiddenErrorMessage: 'is-hidden', 22 formSubmittingState: '--submitting', 23 buttonSubmittingState: 'is-loading' 24 }, 25 customValidations: { 26 test: [{ 27 name: 'isValid', 28 condition: (value) => value === 'testing', 29 message: 'This field value should be "testing".' 30 }] 31 }, 32 customValidationsMessages: { 33 "fieldName": { 34 "empty": "message", 35 "invalid": "message", 36 } 37 }, 38 onStepChange: (previous, next) => console.log(current, next), 39 onBeforeSubmit: () => console.log('Before submit'), 40 onValidationError: fields => console.log(fields), 41 onSubmitStart: () => console.log('Submit start'), 42 onSubmitEnd: () => console.log('Submit end'), 43 onSuccess: resp => console.log('Success', resp), 44 onError: err => console.log('Error', err) 45});
1<form method="GET" action="https://jsonplaceholder.typicode.com/todos/1" id="myForm" novalidate> 2 <div class="form__field --required" data-type="text"> 3 <label for="nameInput">Name</label> 4 <input class="form__control" 5 type="text" 6 name="name" 7 id="nameInput" 8 placeholder="Text input" 9 aria-invalid="false" 10 aria-errormessage="nameInputError" 11 required> 12 <p class="form__error" id="nameInputError"></p> 13 </div> 14 15 <div class="form__field --required" data-type="email"> 16 <label for="emailInput">Email</label> 17 <input class="form__control" 18 type="email" 19 name="email" 20 id="emailInput" 21 placeholder="Email input" 22 aria-invalid="false" 23 aria-errormessage="emailInputError" 24 required> 25 <p class="form__error" id="emailInputError"></p> 26 </div> 27 28 <div class="form__field" data-type="file" data-max-size="15"> 29 <label for="fileInput">File upload</label> 30 <small>Max. file size 2MB</small> 31 <input class="file-input form__control" 32 type="file" 33 name="resume" 34 id="fileInput" 35 aria-invalid="false" 36 aria-errormessage="fileInputError"> 37 <p class="form__error" id="fileInputError"></p> 38 </div> 39 40 <div class="form__field" data-type="text"> 41 <label>Message</label> 42 <textarea class="form__control" 43 name="message" 44 placeholder="Textarea" 45 aria-errormessage="msgTextError"> 46 </textarea> 47 <p class="form__error" id="msgTextError"></p> 48 </div> 49 50 <button type="submit">Submit</button> 51</form>
Class | Description |
---|---|
form__field | This is the element that wraps the label, the control and the error message of a specific field. |
form__control | This is a control element. It could be either an input, a select, a textarea, etc. |
form__error | This is the element which will be used to display error messages for a specific field. |
Name | Default | Description |
---|---|---|
requiredField | --required | Use this class to mark required fields. |
requiredIfFilledField | --required-if-filled | Use this class to mark those fields that should be validated only when filled. For example, an email field that is not required but should be a valid email if filled. |
validateOnBlur | --validate-onblur | Use this class to mark those fields that should be validated when the control is blurred. |
validateOnInput | --validate-oninput | Use this class to mark those fields that should be validated in real time as the control gets new input. |
fieldHasError | --has-error | This class is added to the fields that has errors after validation and removed when the field is focused. |
controlHasError | - | You can set this class to be added to the controls that has errors. Works similar to fieldHasError. |
hiddenErrorMessage | --hidden | This class is removed from the error messages when it's parent field has errors and added back when the field is focused. |
formSubmittingState | --submitting | This class is added to the form while it's being submited. |
buttonSubmittingState | --loading | This class is added to the submit button while the form is being submited. |
Name | Description | Accepted values |
---|---|---|
element | The form element. I.g. document.getElementById('myform') | A DOM element |
submitType | The method that will be used to submit the form. IMPORTANT: the action attribute is required in any case. | fetch , get and post |
submitDataFormat | If submitTypes is fetch, this option will be use to define de content type of the request. | json and formData |
requestHeaders | If submitTypes is fetch, this option lets you pass your own headers. Should recieve an object containing valid HTTP headers. See reference. | Object or null . |
fieldGroups | Group fields as nestes objects inside the body of the request. Should recieve an object containing key-value pairs, where the key is the name of the group and the value an array listing the field names. | Object or null . |
classes | Customize some classes to match your own. Should recieve an object containig the replaced classnames. See [customizable classes] | Object or null . |
customValidations | Define your own validations. Should recieve an object containig key-value pairs, where the key is the name of the custom data-type , and the value an array of validations defining a condition to be passed and a message in case it's not. | Object or null . |
customValidationMessages | Lets you customize existing validation messages. It expects an object containing the name of the field and the custom messages inside. Refer to Usage to see an example. | Object or null . |
resetOnSuccess | This option completely resets the form and its fields. | Boolean, default true . |
scrollOnError | This option smoothly scrolls the page to show the first field with errors. Useful when building long forms to make sure the user sees the errors. | Boolean, default true . |
debug | On debug mode, the form won't be submitted. Intead, every step will be logged into the dev console of the browser. | Boolean, default false . |
Name | Description | Accepted values |
---|---|---|
onStepChange | Event triggered every time there's a step change. Only available for stepped forms. It returns the previous and the next steps. | An anonymous function or null . |
onValidationError | Event triggered when there's any validation error. It returns an array containing the names of the invalid fields. | An anonymous function or null . |
onBeforeSubmit | Event triggered before the submit starts. | An anonymous function or null . |
onSubmitStart | Event triggered when the submit starts. | An anonymous function or null . |
onSubmitEnd | Event triggered when the submit ends, regardless of the outcome. | An anonymous function or null . |
onSuccess | Event triggered when the request results successful. | An anonymous function or null . |
onError | Event triggered when the response returns an error. | An anonymous function or null . |
In order to use validations, you must set the correct data type for each field. You can do so by adding a type
data attribute to the field element, e.g; <div class="form__field" data-type="text">
. This attribute will be used by the validator to run certain tests. Here's a list of the different available data types:
Name | Description |
---|---|
text | This can be considered as the default type. It's use for simple text input and it doesn't have any special validation appart from the required ones. |
email | Used for email inputs. It validates the value to comply the requirement for a well formed email address. |
url | Used for URL inputs. It validates the value to comply the requirement for a well formed URL. |
cuit / cuil | It validates the value to comply the requirement for a valid CUIT or CUIL number, applying the official formula. |
password_repeat | Use this type alogn with a password field whit an ID of password , to validate that both fields have the same value. Mostly intended for password reset forms. |
single_checkbox | This type validates that a specific checkbox is checked. Useful for cases like terms and conditions acceptance. |
In addition you can validate the minimum and maximum length of a field. You can do so by adding the data-min-length
and data-max-length
attributes to the field element.
Attribute | Description |
---|---|
data-min-length | The minimum length of the field. |
data-max-length | The maximum length of the field. |
Add this class names to the field element in order to apply some masks and filters to your inputs.
Class name | Description | Extra attributes |
---|---|---|
--number | It converts the value to only numbers, with the option of being formated and support decimals. | data-thousands-separator : if declared it will be used to separate thousands.data-decimal-separator : if declared it will be used to separate decimals.data-decimals : the number of decimal places, defaults to 2. |
--money-amount | It converts the input into a valid currency expression. | data-currency : this attribute is use to mask the field value adding the currency at the begining. Defualts to '$'. |
--phone | It filters the value using a (opinionated) regular expression, which only allows numbers, plus symbols, hyphens, parentheses and white spaces. |
Add a button with the class name form__toggle-password-visibility
inside the field element to toggle the control (input) type between password
and text
. Note: the control and the button must be siblings.
No vulnerabilities found.
No security vulnerabilities found.