Skip to content

Commit 4a2dbf6

Browse files
iamnotshifuiamnotshifu
authored
* Added errorDetails() function which accepts an object as parameter and displays error messages based on either inline or modal * Welcome to [email protected] * Welcome to [email protected] * [email protected]
1 parent 3b62306 commit 4a2dbf6

File tree

9 files changed

+76
-10
lines changed

9 files changed

+76
-10
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Changelog
22

3+
## [2.2.0] - 2023-09-25
4+
5+
### Added
6+
7+
- Added `loading()` function, this function is used to add your loading message incase you wished to have a custom loading animation or text if you choose not to use the defualt submit function. This function takes 2 parameters. See more information in the [ReadMe](ReadMe)
8+
9+
- Added a new HTML class, `js-spin` to be add to the previous `spin` class for adding sping effect to an element.
10+
311
## [2.1.0] - 2023-09-09
412
### Added
513
- Added the `displayError()` function which accepts 1 parameter of data type object. See more details and how to use it in the [ReadMe](ReadMe)

‎ReadMe.md‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ To use the library in your project, there are two ways to include NFSF234 Form V
5252
If you're looking to employ the form validation library in your browser environment, simply include the following URLs within the `<head>` tag of your HTML code:
5353

5454
```html
55-
<link rel="stylesheet" href="https://unpkg.com/nfsfu234-form-validation@2.1.0/dist/css/nfsfu234FormValidation.min.css">
56-
<script src="https://unpkg.com/nfsfu234-form-validation@2.1.0/dist/js/nfsfu234FormValidation.js"></script>
55+
<link rel="stylesheet" href="https://unpkg.com/nfsfu234-form-validation@2.2.0/dist/css/nfsfu234FormValidation.min.css">
56+
<script src="https://unpkg.com/nfsfu234-form-validation@2.2.0/dist/js/nfsfu234FormValidation.js"></script>
5757
```
5858

5959
This way, your browser-based project can readily harness the capabilities of the NFSFU234 Form Validation library. 🌐📦
@@ -158,6 +158,7 @@ Here you'll find a compilation of functions available within the NFSFU234 Form V
158158
| 25 | [getPageUrl():string](#getpageurlstring) | `formValidator.getPageUrl()` | Returns the current page URL | ✅ | ❌ |
159159
| 26 | [hashPassword(password):Promise](#hashpasswordpasswordpromise) | `formValidator.hashPassword('1234-efrgty').then((response)=>{ console.log(response) });` | Returns the promise which has the hashed password | ✅ | ✅ |
160160
| 27 | [displayError(errorDetails:object):void](#displayerrorerrordetailsvoid) | `formValidator.displayError(errorDetails)` | Displays an error message for a given period of time | ✅ | ❌ |
161+
| 28 | [loading(message:string, submitBtn: HTM,String)](#loadingmessage-submitbtn--nullbool) | `formValidator.loading("Loading...", "submitBtnId")` | Displays a loading message for your button | ✅ | ❌|
161162

162163

163164

@@ -701,7 +702,7 @@ formValidator.ajax(AJAXOptions)
701702
}
702703

703704

704-
// We ca;; the displayError function to display the error.
705+
// We call the displayError function to display the error.
705706
formValidator.displayError(errorDetails);
706707

707708

@@ -713,6 +714,27 @@ formValidator.ajax(AJAXOptions)
713714

714715
```
715716

717+
### `loading(message, submitBtn = null):bool`
718+
The `loading()` function is used to display a loading message in your button. This function is ideal if you choose to use the validate() function independly. Because you might wish for the users to know they are awaiting a response, so you can have a little message or animation you wish to show between validation and perhaps awaiting the results from the AJAX request.
719+
720+
#### Parameters:
721+
722+
- `message`: This will contain the message or HTML contents you wish to insert into your Button or set as the value of the button.
723+
- `submitBtn (optional)`: This is optional because assuming you have initialized the NFSFU234FormValidation Library, you would have had an inital form so the button or submit button found in the form will be used else you want a diffrent button, you can either pass the HTML Element or pass the ID of the button
724+
725+
#### Usage
726+
727+
```javascript
728+
// Assuming you have already created an instance of the library named 'formValidator'
729+
730+
// Using the Default Button
731+
formValidator.loading('Loading Message');
732+
733+
// Using a Difffrent Button || Assuming your form has diffrent buttons
734+
const button = document.getElementById('btnId');
735+
formValidator.loading('Loading Message', button);
736+
737+
```
716738

717739
## Using NFSF234 Form Validation Library in Node.js Application
718740

‎dist/js/nfsfu234FormValidation.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/nfsfu234FormValidation.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nfsfu234-form-validation",
3-
"version": "2.1.0",
3+
"version": "2.2.0",
44
"description": "NFSFU234 Form Validation is a lightweight and user-friendly JavaScript library designed for validating HTML form elements, with a special emphasis on textarea fields. It offers customizable validation messages, comprehensive support for required field checks, seamless inline error displays, and convenient modal error notifications.",
55
"main": "dist\\js\\nfsfu234FormValidation.js",
66
"directories": {

‎src/css/index.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,9 @@
141141
}
142142

143143
/* Styling for elements with the spin class */
144-
.spin {
144+
.spin,
145+
.js-spin
146+
{
145147
animation: spin 1s infinite linear; /* Apply the spinning animation */
146148
}
147149

‎src/js/nfsfu234-form-validation.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -927,6 +927,33 @@ const bcrypt = require('bcryptjs');
927927

928928
return false; // Form validation failed
929929
}
930+
931+
loading(message, submitBtn = null)
932+
{
933+
934+
let btn;
935+
if ( this._checkVariableType(submitBtn) === 'HTML element' )
936+
{
937+
btn = submitBtn;
938+
}
939+
else if ( this._checkVariableType(submitBtn) === 'string' && document.getElementById(`${submitBtn}`) )
940+
{
941+
btn = document.getElementById(`${submitBtn}`);
942+
}
943+
else if ( submitBtn === null )
944+
{
945+
btn = this._form.querySelector('button[type=submit]') || this._form.querySelector('button[type=submit]') || this._form.querySelector('input[type=submit]') || this._form.querySelector('#jsSubmit') || this._form.querySelector('button') || false;
946+
}
947+
else
948+
{
949+
console.error("The Button you are trying to change the contents is not found. Check Your HTML Code");
950+
return false;
951+
}
952+
953+
(btn.value) ? btn.value = message : btn.innerHTML = message;
954+
return true;
955+
956+
}
930957

931958
/**
932959
* Submit Form with Validation and Optional AJAX
@@ -967,7 +994,7 @@ const bcrypt = require('bcryptjs');
967994
var responseData = false;
968995

969996
// Show a loading message on the submit button while processing the form
970-
(submitBtn.value) ? submitBtn.value = 'Loading...' : submitBtn.innerHTML = "<svg fill='currentcolor' class='spin' style='margin-right: 3px;' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'><path d='M462.25 0c-6.371 0 -11.531 5.159 -11.531 11.531l0 182.219l.031 0c0 6.347 5.153 11.5 11.5 11.5l69.063 0c.343 .03 .68 .031 1.031 .031 6.372 0 11.531 -5.16 11.531 -11.531l0 -182.219l-.031 0c0 -6.347 -5.153 -11.5 -11.5 -11.5l-69.094 0c-.328 -.03 -.663 -.031 -1 -.031zm249.594 46.594c-4.082 -.111 -8.091 1.968 -10.281 5.75l-91.094 157.781l0 .062c-3.161 5.5 -1.282 12.528 4.219 15.688l60.063 34.656c.203 .136 .41 .251 .625 .375 5.5 3.187 12.533 1.313 15.719 -4.188l91.125 -157.813c3.187 -5.5 1.282 -12.533 -4.219 -15.719l-60.688 -35.063c-1.719 -.996 -3.613 -1.481 -5.469 -1.531zm-428.375 2.688c-1.856 .051 -3.75 .567 -5.469 1.563l-60.688 35.063c-5.474 3.17 -7.372 10.199 -4.219 15.688l90.781 157.219c.106 .21 .224 .418 .344 .625 3.187 5.5 10.218 7.373 15.719 4.188l60.719 -35.063c5.474 -3.17 7.341 -10.199 4.188 -15.688l-90.75 -157.188c-.107 -.217 -.221 -.444 -.344 -.656 -2.19 -3.782 -6.199 -5.861 -10.281 -5.75zm620.375 162.313c-1.848 .046 -3.722 .515 -5.438 1.5l-157.219 90.781c-.21 .106 -.418 .224 -.625 .344 -5.5 3.187 -7.373 10.218 -4.188 15.719l35.063 60.719c3.17 5.474 10.199 7.341 15.688 4.188l157.188 -90.75c.217 -.107 .444 -.221 .656 -.344 5.5 -3.185 7.374 -10.25 4.188 -15.75l-35.063 -60.688c-2.179 -3.764 -6.184 -5.82 -10.25 -5.719zm-810.375 4.656c-4.082 -.111 -8.091 1.968 -10.281 5.75l-35.063 60.688c-3.187 5.5 -1.282 12.565 4.219 15.75l157.781 91.094l.062 0c5.5 3.161 12.528 1.282 15.688 -4.219l34.656 -60.063c.136 -.203 .251 -.41 .375 -.625 3.187 -5.5 1.313 -12.533 -4.188 -15.719l-157.813 -91.125c-1.719 -.996 -3.582 -1.481 -5.438 -1.531zm712.781 234.469l0 .031c-6.347 0 -11.5 5.153 -11.5 11.5l0 69.063c-.029 .343 -.063 .68 -.063 1.031 0 6.372 5.192 11.531 11.563 11.531l182.219 0l0 -.031c6.347 0 11.5 -5.153 11.5 -11.5l0 -69.094c.03 -.328 .031 -.663 .031 -1 0 -6.371 -5.159 -11.531 -11.531 -11.531l-182.219 0zm-794.719 5.406l0 .031c-6.347 0 -11.5 5.153 -11.5 11.5l0 69.094c-.03 .328 -.031 .663 -.031 1 0 6.371 5.159 11.531 11.531 11.531l182.219 0l0 -.031c6.347 0 11.5 -5.153 11.5 -11.5l0 -69.063c.03 -.343 .031 -.68 .031 -1.031 0 -6.372 -5.16 -11.531 -11.531 -11.531l-182.219 0zm772.844 152.813c-4.075 -.097 -8.078 1.968 -10.25 5.75l-34.656 60.063c-.136 .203 -.251 .41 -.375 .625 -3.187 5.5 -1.313 12.533 4.188 15.719l157.813 91.125c5.5 3.187 12.533 1.282 15.719 -4.219l35.063 -60.688c3.187 -5.5 1.282 -12.565 -4.219 -15.75l-157.781 -91.094l-.062 0c-1.719 -.988 -3.585 -1.487 -5.438 -1.531zm-566.063 4.688c-1.848 .046 -3.722 .546 -5.438 1.531l-157.188 90.75c-.217 .107 -.444 .221 -.656 .344 -5.5 3.185 -7.374 10.25 -4.188 15.75l35.063 60.688c3.17 5.474 10.199 7.372 15.688 4.219l157.219 -90.781c.21 -.106 .418 -.224 .625 -.344 5.5 -3.187 7.373 -10.218 4.188 -15.719l-35.063 -60.719c-2.179 -3.764 -6.184 -5.82 -10.25 -5.719zm467.188 121.188c-1.856 .051 -3.719 .567 -5.438 1.563l-60.719 35.063c-5.474 3.17 -7.341 10.199 -4.188 15.688l90.75 157.188c.107 .217 .221 .444 .344 .656 3.185 5.5 10.25 7.374 15.75 4.188l60.688 -35.063c5.474 -3.17 7.372 -10.199 4.219 -15.688l-90.781 -157.219c-.106 -.21 -.224 -.418 -.344 -.625 -2.191 -3.782 -6.199 -5.861 -10.281 -5.75zm-366.313 2.719c-4.082 -.111 -8.091 1.968 -10.281 5.75l-91.125 157.813c-3.187 5.5 -1.282 12.533 4.219 15.719l60.688 35.063c5.5 3.187 12.565 1.282 15.75 -4.219l91.094 -157.781l0 -.062c3.161 -5.5 1.282 -12.528 -4.219 -15.688l-60.063 -34.656c-.203 -.136 -.41 -.251 -.625 -.375 -1.719 -.996 -3.582 -1.512 -5.438 -1.563zm148.469 57.156c-6.372 0 -11.531 5.192 -11.531 11.563l0 182.219l.031 0c0 6.347 5.153 11.5 11.5 11.5l69.094 0c.328 .03 .663 .031 1 .031 6.371 0 11.531 -5.159 11.531 -11.531l0 -182.219l-.031 0c0 -6.347 -5.153 -11.5 -11.5 -11.5l-69.063 0c-.343 -.029 -.68 -.063 -1.031 -.063z'/></svg> loading ";
997+
(submitBtn.value) ? submitBtn.value = 'Loading...' : submitBtn.innerHTML = "<svg fill='currentcolor' class='js-spin' style='margin-right: 3px;' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'><path d='M462.25 0c-6.371 0 -11.531 5.159 -11.531 11.531l0 182.219l.031 0c0 6.347 5.153 11.5 11.5 11.5l69.063 0c.343 .03 .68 .031 1.031 .031 6.372 0 11.531 -5.16 11.531 -11.531l0 -182.219l-.031 0c0 -6.347 -5.153 -11.5 -11.5 -11.5l-69.094 0c-.328 -.03 -.663 -.031 -1 -.031zm249.594 46.594c-4.082 -.111 -8.091 1.968 -10.281 5.75l-91.094 157.781l0 .062c-3.161 5.5 -1.282 12.528 4.219 15.688l60.063 34.656c.203 .136 .41 .251 .625 .375 5.5 3.187 12.533 1.313 15.719 -4.188l91.125 -157.813c3.187 -5.5 1.282 -12.533 -4.219 -15.719l-60.688 -35.063c-1.719 -.996 -3.613 -1.481 -5.469 -1.531zm-428.375 2.688c-1.856 .051 -3.75 .567 -5.469 1.563l-60.688 35.063c-5.474 3.17 -7.372 10.199 -4.219 15.688l90.781 157.219c.106 .21 .224 .418 .344 .625 3.187 5.5 10.218 7.373 15.719 4.188l60.719 -35.063c5.474 -3.17 7.341 -10.199 4.188 -15.688l-90.75 -157.188c-.107 -.217 -.221 -.444 -.344 -.656 -2.19 -3.782 -6.199 -5.861 -10.281 -5.75zm620.375 162.313c-1.848 .046 -3.722 .515 -5.438 1.5l-157.219 90.781c-.21 .106 -.418 .224 -.625 .344 -5.5 3.187 -7.373 10.218 -4.188 15.719l35.063 60.719c3.17 5.474 10.199 7.341 15.688 4.188l157.188 -90.75c.217 -.107 .444 -.221 .656 -.344 5.5 -3.185 7.374 -10.25 4.188 -15.75l-35.063 -60.688c-2.179 -3.764 -6.184 -5.82 -10.25 -5.719zm-810.375 4.656c-4.082 -.111 -8.091 1.968 -10.281 5.75l-35.063 60.688c-3.187 5.5 -1.282 12.565 4.219 15.75l157.781 91.094l.062 0c5.5 3.161 12.528 1.282 15.688 -4.219l34.656 -60.063c.136 -.203 .251 -.41 .375 -.625 3.187 -5.5 1.313 -12.533 -4.188 -15.719l-157.813 -91.125c-1.719 -.996 -3.582 -1.481 -5.438 -1.531zm712.781 234.469l0 .031c-6.347 0 -11.5 5.153 -11.5 11.5l0 69.063c-.029 .343 -.063 .68 -.063 1.031 0 6.372 5.192 11.531 11.563 11.531l182.219 0l0 -.031c6.347 0 11.5 -5.153 11.5 -11.5l0 -69.094c.03 -.328 .031 -.663 .031 -1 0 -6.371 -5.159 -11.531 -11.531 -11.531l-182.219 0zm-794.719 5.406l0 .031c-6.347 0 -11.5 5.153 -11.5 11.5l0 69.094c-.03 .328 -.031 .663 -.031 1 0 6.371 5.159 11.531 11.531 11.531l182.219 0l0 -.031c6.347 0 11.5 -5.153 11.5 -11.5l0 -69.063c.03 -.343 .031 -.68 .031 -1.031 0 -6.372 -5.16 -11.531 -11.531 -11.531l-182.219 0zm772.844 152.813c-4.075 -.097 -8.078 1.968 -10.25 5.75l-34.656 60.063c-.136 .203 -.251 .41 -.375 .625 -3.187 5.5 -1.313 12.533 4.188 15.719l157.813 91.125c5.5 3.187 12.533 1.282 15.719 -4.219l35.063 -60.688c3.187 -5.5 1.282 -12.565 -4.219 -15.75l-157.781 -91.094l-.062 0c-1.719 -.988 -3.585 -1.487 -5.438 -1.531zm-566.063 4.688c-1.848 .046 -3.722 .546 -5.438 1.531l-157.188 90.75c-.217 .107 -.444 .221 -.656 .344 -5.5 3.185 -7.374 10.25 -4.188 15.75l35.063 60.688c3.17 5.474 10.199 7.372 15.688 4.219l157.219 -90.781c.21 -.106 .418 -.224 .625 -.344 5.5 -3.187 7.373 -10.218 4.188 -15.719l-35.063 -60.719c-2.179 -3.764 -6.184 -5.82 -10.25 -5.719zm467.188 121.188c-1.856 .051 -3.719 .567 -5.438 1.563l-60.719 35.063c-5.474 3.17 -7.341 10.199 -4.188 15.688l90.75 157.188c.107 .217 .221 .444 .344 .656 3.185 5.5 10.25 7.374 15.75 4.188l60.688 -35.063c5.474 -3.17 7.372 -10.199 4.219 -15.688l-90.781 -157.219c-.106 -.21 -.224 -.418 -.344 -.625 -2.191 -3.782 -6.199 -5.861 -10.281 -5.75zm-366.313 2.719c-4.082 -.111 -8.091 1.968 -10.281 5.75l-91.125 157.813c-3.187 5.5 -1.282 12.533 4.219 15.719l60.688 35.063c5.5 3.187 12.565 1.282 15.75 -4.219l91.094 -157.781l0 -.062c3.161 -5.5 1.282 -12.528 -4.219 -15.688l-60.063 -34.656c-.203 -.136 -.41 -.251 -.625 -.375 -1.719 -.996 -3.582 -1.512 -5.438 -1.563zm148.469 57.156c-6.372 0 -11.531 5.192 -11.531 11.563l0 182.219l.031 0c0 6.347 5.153 11.5 11.5 11.5l69.094 0c.328 .03 .663 .031 1 .031 6.371 0 11.531 -5.159 11.531 -11.531l0 -182.219l-.031 0c0 -6.347 -5.153 -11.5 -11.5 -11.5l-69.063 0c-.343 -.029 -.68 -.063 -1.031 -.063z'/></svg> loading ";
971998

972999
// Perform form validation using the `_validateForm` function
9731000
if (!this._validateForm(form, this._customErrorMessages, isErrorMessageInline)) {

‎web/assets/json/function-list.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,13 @@
187187
"Description": "Displays and error message based on the object information you passed",
188188
"Browser Supported": "✅",
189189
"Console Supported (Node.js)": "❌"
190+
},
191+
{
192+
"Function Name": "loading(message:string, submitBtn: HTM,String):bool",
193+
"How to Call": "formValidator.loading('Loading Message');",
194+
"Description": "The loading() function is used to display a loading message in your button. This function is ideal if you choose to use the validate() function independly. Because you might wish for the users to know they are awaiting a response, so you can have a little message or animation you wish to show between validation and perhaps awaiting the results from the AJAX request.",
195+
"Browser Supported": "✅",
196+
"Console Supported (Node.js)": "❌"
190197
}
191198

192199
]

‎web/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<link rel="stylesheet" href="assets/css/style.css">
88

99
<!-- Load NFSFU234FormValidation Library -->
10-
<script src="https://unpkg.com/nfsfu234-form-validation@2.1.0/dist/js/nfsfu234FormValidation.js"></script>
10+
<script src="https://unpkg.com/nfsfu234-form-validation@2.2.0/dist/js/nfsfu234FormValidation.js"></script>
1111
<script src="assets/js/script.js"></script>
1212

13-
<script> const ajaxOptions = { url: 'https://unpkg.com/nfsfu234-form-validation@2.1.0/package.json', RequestMethod: 'GET', }; const NFSFU234FormValidationLibrary = new NFSFU234FormValidation(); (async () => { try {
13+
<script> const ajaxOptions = { url: 'https://unpkg.com/nfsfu234-form-validation@2.2.0/package.json', RequestMethod: 'GET', }; const NFSFU234FormValidationLibrary = new NFSFU234FormValidation(); (async () => { try {
1414
const response = await NFSFU234FormValidationLibrary.ajax(ajaxOptions);
1515
const title = `${ response.name.toUpperCase() } - v${response.version}`;
1616
document.title = title;

0 commit comments

Comments
 (0)