diff --git a/README.md b/README.md index 2c5e20c..26db70f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -# HTML 5 & Bootstrap Jquery Form Validation Plugin +HTML 5 & Bootstrap Jquery Form Validation Plugin +================================================ + +### HTML 5 & Bootstrap 5 & Jquery 3 jbvalidator is a fresh new jQuery based form validation plugin that is created for the latest Bootstrap 5 framework and supports both client side and server-side validation. @@ -17,31 +20,32 @@ Or grab from jsdelivr CDN : ``` -### HTML 5 & Bootstrap 5 & Jquery 3 +##### [DEMO LINK](https://emretulek.github.io/jbvalidator/) -[DEMO LINK](https://emretulek.github.io/jbvalidator/) - -* **Html 5 validation** -* **data-v-equal**: id of the element that should be the same -* **data-v-min-select**: multiple selectbox, minimum selectable count -* **data-v-max-select**: multiple selectbox, maximum selectable count -* **data-checkbox-group**: the parent attribute of group checkbox elements -**data-v-min-select**: parent attribute minimum selectable count -**data-v-required**: parent attribute required -* **data-v-min**: alternative of the min attribute, this can be used for attribute type text -* **data-v-max**: alternative of the max attribute, this can be used for attribute type text -* **data-v-min-length**: alternative of the minlength attribute -* **data-v-max-length**: alternative of the maxlength attribute -* **data-v-min-size**: the input type file minimum file size (byte) -* **data-v-max-size**: the input type file maximum file size (byte) -* **data-v-message**: alternative error mesage +- **Html 5 validation** +- **data-v-equal**: id of the element that should be the same +- **data-v-min-select**: multiple selectbox, minimum selectable count +- **data-v-max-select**: multiple selectbox, maximum selectable count +- **data-checkbox-group**: the parent attribute of group checkbox elements +- **data-v-min**: alternative of the min attribute, this can be used for attribute type text +- **data-v-max**: alternative of the max attribute, this can be used for attribute type text +- **data-v-min-length**: alternative of the minlength attribute +- **data-v-max-length**: alternative of the maxlength attribute +- **data-v-min-size**: the input type file minimum file size (byte) +- **data-v-max-size**: the input type file maximum file size (byte) +- **data-v-message**: alternative error mesage + +### Methods + +- **validator**: add new custom validation +- **checkAll(formSelector = null, event = null)**: show errors without submitting the form, return error count +- **errorTrigger(inputSelector, message)**: show the error messages returned from the server. +- **reload()**: reload instance after dynamic element is added ### Usage -```html -The form's attribute have to novalidate
-``` + +The form's attribute have to novalidate `` ```javascript - - ``` -### Options +### Serverside validation + +You can show the error messages returned from the server. The ".errorTrigger" method can be used for this. + +.errorTrigger(element, message) ```javascript + + +``` + +### Options + +``` { - language: '', //json file url - errorMessage: true, - successClass: false, - html5BrowserDefault: false, - validFeedBackClass: 'valid-feedback', - invalidFeedBackClass: 'invalid-feedback', - validClass: 'is-valid', - invalidClass: 'is-invalid' + language: '', //json file url + errorMessage: true, + successClass: false, + html5BrowserDefault: false, + validFeedBackClass: 'valid-feedback', + invalidFeedBackClass: 'invalid-feedback', + validClass: 'is-valid', + invalidClass: 'is-invalid' } ``` ### Language file content - -```json +``` { "maxValue": "Value must be less than or equal to %s.", "minValue": "Value must be greater than or equal to %s.", @@ -142,40 +192,4 @@ The form's attribute have to novalidate } } } - -``` - -### Serverside validation - -.errorTrigger(element, message) -```javascript - - - - ``` diff --git a/dist/jbvalidator.min.js b/dist/jbvalidator.min.js index 7f3aac2..6d9cf9e 100644 --- a/dist/jbvalidator.min.js +++ b/dist/jbvalidator.min.js @@ -1 +1 @@ -!function(e){"use strict";e.fn.jbvalidator=function(t){t=e.extend({},{language:"",errorMessage:!0,successClass:!1,html5BrowserDefault:!1,validFeedBackClass:"valid-feedback",invalidFeedBackClass:"invalid-feedback",validClass:"is-valid",invalidClass:"is-invalid"},t);let a=this,i={maxValue:"Value must be less than or equal to %s.",minValue:"Value must be greater than or equal to %s.",maxLength:"Please lengthen this text to %s characters or less (you are currently using %s characters).",minLength:"Please lengthen this text to %s characters or more (you are currently using %s characters).",minSelectOption:"Please select at least %s options.",maxSelectOption:"Please select at most %s options.",groupCheckBox:"Please select at least %s options.",equal:"This field does not match with %s field.",fileMinSize:"File size cannot be less than %s bytes.",fileMaxSize:"File size cannot be more than %s bytes.",number:"Please enter a number.",HTML5:{valueMissing:{INPUT:{default:"Please fill out this field.",checkbox:"Please check this box.",radio:"Please select one of these options.",file:"Please select a file."},SELECT:"Please select an item in the list."},typeMismatch:{email:"Please enter an e-mail address.",url:"Please enter a URL."},rangeUnderflow:{date:"Value must be %s or later.",month:"Value must be %s or later.",week:"Value must be %s or later.",time:"Value must be %s or later.",datetimeLocale:"Value must be %s or later.",number:"Value must be greater than or equal to %s.",range:"Value must be greater than or equal to %s."},rangeOverflow:{date:"Value must be %s or earlier.",month:"Value must be %s or earlier.",week:"Value must be %s or earlier.",time:"Value must be %s or earlier.",datetimeLocale:"Value must be %s or earlier.",number:"Value must be less than or equal to %s.",range:"Value must be less than or equal to %s."},stepMismatch:{date:"You can only select every %s. day in the date calendar.",month:"You can only select every %s. month in the date calendar.",week:"You can only select every %s. week in the date calendar.",time:"You can only select every %s. second in the time picker.",datetimeLocale:"You can only select every %s. second in the time picker.",number:"Please enter a valid value. Only %s and a multiple of %s.",range:"Please enter a valid value. Only %s and a multiple of %s."},tooLong:"Please lengthen this text to %s characters or less (you are currently using %s characters).",tooShort:"Please lengthen this text to %s characters or more (you are currently using %s characters).",patternMismatch:"Please match the request format. %s",badInput:{number:"Please enter a number."}}};const n="input, textarea, select";let l=0;t.language&&e.getJSON(t.language,(function(e){i=e})),e(a).on("submit",(function(e){l=0,r(e),l&&(e.preventDefault(),e.stopPropagation())}));let r=function(t){return l=0,e(a).find(n).each(((e,a)=>{o(a,t)})),l},s=function(){e(a).find(n).each(((t,a)=>{e(a).off("input"),e(a).on("input",(function(t){if(o(this,t),p(a,"data-v-equal")){let t=e(a).attr("data-v-equal");e(t).one("input",(function(){let t=e(this).attr("id");e('[data-v-equal="#'+t+'"]').trigger("input")}))}}))}))},o=function(e,a){e.setCustomValidity(""),!1!==e.checkValidity()?Object.values(f).map((t=>{let i=t.call(t,e,a);i&&e.setCustomValidity(i)})):t.html5BrowserDefault||e.setCustomValidity(d(e)),!1===e.checkValidity()?(u(e,e.validationMessage),l++):c(e)},u=function(a,i){if(e(a).removeClass(t.validClass),e(a).addClass(t.invalidClass),i=e(a).data("vMessage")??i,t.errorMessage){let n=e(a).parent();if(e(n).length){let a=e(n).find("."+t.invalidFeedBackClass);e(a).length?e(a).html(i):e(n).append('
'+i+"
")}}},c=function(a){e(a).removeClass(t.invalidClass),t.successClass&&e(a).addClass(t.validClass)},f={multiSelectMin:function(t){if("SELECT"===e(t).prop("tagName")&&e(t).prop("multiple")){let a=e(t).data("vMinSelect"),n=e(t).find("option:selected").length;if(n0))return i.minSelectOption.sprintf(a)}return""},multiSelectMax:function(t){if("SELECT"===e(t).prop("tagName")&&e(t).prop("multiple")){let a=e(t).data("vMaxSelect"),n=e(t).find("option:selected").length;if(n>a&&(e(t).prop("require")||n>0))return i.maxSelectOption.sprintf(a)}return""},equal:function(t){let a=e(t).data("vEqual");if(a){let n=e(a).attr("title");if(e(a).val()!==e(t).val())return i.equal.sprintf(n||"")}return""},groupCheckBox:function(t,a){if(p(t,"type","checkbox")){let n=e(t).closest("[data-checkbox-group]"),l=e(n).data("vMinSelect"),r=n.find("input[type=checkbox]:checked").length,s=void 0===e(n).data("vRequired")?0:1;if(n&&(void 0!==a.originalEvent&&"input"===a.originalEvent.type&&e(n).find("input[type=checkbox]").each(((t,a)=>{e(a).trigger("input")})),r0)&&!1===e(t).prop("checked")))return i.groupCheckBox.sprintf(l)}return""},customMin:function(t){if(p(t,"data-v-min")){let a=e(t).data("vMin"),n=e(t).val();if(isNaN(n)&&(e(t).prop("require")||n.length>0))return i.number;if(n0))return i.minValue.sprintf(a)}return""},customMax:function(t){if(p(t,"data-v-max")){let a=e(t).data("vMax"),n=e(t).val();if(isNaN(n)&&(e(t).prop("require")||n.length>0))return i.number;if(n>a&&(e(t).prop("require")||n.length>0))return i.maxValue.sprintf(a)}return""},customMinLength:function(t){if(p(t,"data-v-min-length")){let a=e(t).data("vMinLength"),n=e(t).val().length;if(n0))return i.minLength.sprintf(a,n)}return""},customMaxLength:function(t){if(p(t,"data-v-max-length")){let a=e(t).data("vMaxLength"),n=e(t).val().length;if(n>a&&(e(t).prop("require")||n>0))return i.maxLength.sprintf(a,n)}return""},fileMinSize:function(t){if(p(t,"type","file")){let a=e(t).data("vMinSize");for(let e=0;et.files[e].size)return i.fileMinSize.sprintf(a)}return""},fileMaxSize:function(t){if(p(t,"type","file")){let a=e(t).data("vMaxSize");for(let e=0;e1||0==a?"s":"";e=e.replace(/%s {1}(\w+)\(s\){1}/,"%s $1"+i)}e=e.replace("%s",arguments[t])}return e},s(),{validator:f,errorTrigger:function(e,t){"object"==typeof e&&(e=e[0]),e.setCustomValidity(t),u(e,e.validationMessage)},reload:function(){s()},checkAll:r}}}(jQuery); \ No newline at end of file +!function(e){"use strict";e.fn.jbvalidator=function(t){t=e.extend({},{language:"",errorMessage:!0,successClass:!1,html5BrowserDefault:!1,validFeedBackClass:"valid-feedback",invalidFeedBackClass:"invalid-feedback",validClass:"is-valid",invalidClass:"is-invalid"},t);let a=this,i={maxValue:"Value must be less than or equal to %s.",minValue:"Value must be greater than or equal to %s.",maxLength:"Please lengthen this text to %s characters or less (you are currently using %s characters).",minLength:"Please lengthen this text to %s characters or more (you are currently using %s characters).",minSelectOption:"Please select at least %s options.",maxSelectOption:"Please select at most %s options.",groupCheckBox:"Please select at least %s options.",equal:"This field does not match with %s field.",fileMinSize:"File size cannot be less than %s bytes.",fileMaxSize:"File size cannot be more than %s bytes.",number:"Please enter a number.",HTML5:{valueMissing:{INPUT:{default:"Please fill out this field.",checkbox:"Please check this box.",radio:"Please select one of these options.",file:"Please select a file."},SELECT:"Please select an item in the list."},typeMismatch:{email:"Please enter an e-mail address.",url:"Please enter a URL."},rangeUnderflow:{date:"Value must be %s or later.",month:"Value must be %s or later.",week:"Value must be %s or later.",time:"Value must be %s or later.",datetimeLocale:"Value must be %s or later.",number:"Value must be greater than or equal to %s.",range:"Value must be greater than or equal to %s."},rangeOverflow:{date:"Value must be %s or earlier.",month:"Value must be %s or earlier.",week:"Value must be %s or earlier.",time:"Value must be %s or earlier.",datetimeLocale:"Value must be %s or earlier.",number:"Value must be less than or equal to %s.",range:"Value must be less than or equal to %s."},stepMismatch:{date:"You can only select every %s. day in the date calendar.",month:"You can only select every %s. month in the date calendar.",week:"You can only select every %s. week in the date calendar.",time:"You can only select every %s. second in the time picker.",datetimeLocale:"You can only select every %s. second in the time picker.",number:"Please enter a valid value. Only %s and a multiple of %s.",range:"Please enter a valid value. Only %s and a multiple of %s."},tooLong:"Please lengthen this text to %s characters or less (you are currently using %s characters).",tooShort:"Please lengthen this text to %s characters or more (you are currently using %s characters).",patternMismatch:"Please match the request format. %s",badInput:{number:"Please enter a number."}}};const n="input, textarea, select";let l=0;t.language&&e.getJSON(t.language,(function(e){i=e})),e(a).on("submit",(function(e){l=0,r(this,e),l&&(e.preventDefault(),e.stopPropagation())}));let r=function(t,i){let r=i||"";return l=0,e(t||a).find(n).each(((e,t)=>{o(t,r)})),l},s=function(){e(a).find(n).each(((t,a)=>{e(a).off("input"),e(a).on("input",(function(t){if(o(this,t),p(a,"data-v-equal")){let t=e(a).attr("data-v-equal");e(t).one("input",(function(){let t=e(this).attr("id");e('[data-v-equal="#'+t+'"]').trigger("input")}))}}))}))},o=function(e,a){e.setCustomValidity(""),!1!==e.checkValidity()?Object.values(f).map((t=>{let i=t.call(t,e,a);i&&e.setCustomValidity(i)})):t.html5BrowserDefault||e.setCustomValidity(d(e)),!1===e.checkValidity()?(u(e,e.validationMessage),l++):c(e)},u=function(a,i){if(e(a).removeClass(t.validClass),e(a).addClass(t.invalidClass),i=e(a).data("vMessage")??i,t.errorMessage){let n=e(a).parent();if(e(n).length){let a=e(n).find("."+t.invalidFeedBackClass);e(a).length?e(a).html(i):e(n).append('
'+i+"
")}}},c=function(a){e(a).removeClass(t.invalidClass),t.successClass&&e(a).addClass(t.validClass)},f={multiSelectMin:function(t){if("SELECT"===e(t).prop("tagName")&&e(t).prop("multiple")){let a=e(t).data("vMinSelect"),n=e(t).find("option:selected").length;if(n0))return i.minSelectOption.sprintf(a)}return""},multiSelectMax:function(t){if("SELECT"===e(t).prop("tagName")&&e(t).prop("multiple")){let a=e(t).data("vMaxSelect"),n=e(t).find("option:selected").length;if(n>a&&(e(t).prop("require")||n>0))return i.maxSelectOption.sprintf(a)}return""},equal:function(t){let a=e(t).data("vEqual");if(a){let n=e(a).attr("title");if(e(a).val()!==e(t).val())return i.equal.sprintf(n||"")}return""},groupCheckBox:function(t,a){if(p(t,"type","checkbox")){let n=e(t).closest("[data-checkbox-group]"),l=e(n).data("vMinSelect"),r=n.find("input[type=checkbox]:checked").length,s=void 0===e(n).data("vRequired")?0:1;if(n&&(void 0!==a.originalEvent&&"input"===a.originalEvent.type&&e(n).find("input[type=checkbox]").each(((t,a)=>{e(a).trigger("input")})),r0)&&!1===e(t).prop("checked")))return i.groupCheckBox.sprintf(l)}return""},customMin:function(t){if(p(t,"data-v-min")){let a=e(t).data("vMin"),n=e(t).val();if(isNaN(n)&&(e(t).prop("require")||n.length>0))return i.number;if(n0))return i.minValue.sprintf(a)}return""},customMax:function(t){if(p(t,"data-v-max")){let a=e(t).data("vMax"),n=e(t).val();if(isNaN(n)&&(e(t).prop("require")||n.length>0))return i.number;if(n>a&&(e(t).prop("require")||n.length>0))return i.maxValue.sprintf(a)}return""},customMinLength:function(t){if(p(t,"data-v-min-length")){let a=e(t).data("vMinLength"),n=e(t).val().length;if(n0))return i.minLength.sprintf(a,n)}return""},customMaxLength:function(t){if(p(t,"data-v-max-length")){let a=e(t).data("vMaxLength"),n=e(t).val().length;if(n>a&&(e(t).prop("require")||n>0))return i.maxLength.sprintf(a,n)}return""},fileMinSize:function(t){if(p(t,"type","file")){let a=e(t).data("vMinSize");for(let e=0;et.files[e].size)return i.fileMinSize.sprintf(a)}return""},fileMaxSize:function(t){if(p(t,"type","file")){let a=e(t).data("vMaxSize");for(let e=0;e1||0==a?"s":"";e=e.replace(/%s {1}(\w+)\(s\){1}/,"%s $1"+i)}e=e.replace("%s",arguments[t])}return e},s(),{validator:f,errorTrigger:function(e,t){"object"==typeof e&&(e=e[0]),e.setCustomValidity(t),u(e,e.validationMessage)},reload:function(){s()},checkAll:r}}}(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index d5a3259..7fed386 100644 --- a/index.html +++ b/index.html @@ -42,8 +42,8 @@
GITHUB

Methods

  • validator: add new custom validation
  • -
  • checkAll(): show errors without submitting the form, return error count
  • -
  • errorTrigger(): show the error messages returned from the server.
  • +
  • checkAll(formSelector = null, event = null): show errors without submitting the form, return error count
  • +
  • errorTrigger(inputSelector, message): show the error messages returned from the server.
  • reload(): reload instance after dynamic element is added
diff --git a/package.json b/package.json index e25033a..cc9fe0b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@emretulek/jbvalidator", - "version": "1.0.5", + "version": "1.0.6", "repository": { "type": "git", "url": "git+https://github.com/emretulek/jbvalidator.git" @@ -18,7 +18,6 @@ "devDependencies": { "@webpack-cli/init": "^1.0.2", "copy-webpack-plugin": "^6.2.1", - "jquery": "^3.1.0", "webpack": "^5.3.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0" diff --git a/src/jbvalidator.js b/src/jbvalidator.js index e49a273..845fb98 100644 --- a/src/jbvalidator.js +++ b/src/jbvalidator.js @@ -103,7 +103,7 @@ STATUS = 0; - checkAll(event); + checkAll(this, event); if (STATUS) { event.preventDefault(); @@ -112,11 +112,12 @@ }); - let checkAll = function (event) { - + let checkAll = function (form, event) { + let thisForm = form ? form : FORM; + let thisEvent = event ? event : ''; STATUS = 0; - $(FORM).find(selector).each((i, el) => { - validationRun(el, event); + $(thisForm).find(selector).each((i, el) => { + validationRun(el, thisEvent); }); return STATUS;