| 1 | (function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(require("babel-polyfill")):typeof define==="function"&&define.amd?define(["babel-polyfill"],factory):global.VueForm=factory(global.babelPolyfill)})(this,function(babelPolyfill){"use strict";var classCallCheck=function(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}};var createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined}else{return get(parent,property,receiver)}}else if("value"in desc){return desc.value}else{var getter=desc.get;if(getter===undefined){return undefined}return getter.call(receiver)}};var set=function set(object,property,value,receiver){var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent!==null){set(parent,property,value,receiver)}}else if("value"in desc&&desc.writable){desc.value=value}else{var setter=desc.set;if(setter!==undefined){setter.call(receiver,value)}}return value};function extractValidity(el){var validity=el.validity;var tooShort=validity.tooShort;var valid=validity.valid;var minlength=el.getAttribute("minlength");if(minlength&&typeof tooShort==="undefined"){tooShort=el.value.length<minlength;if(tooShort){valid=false;el.setCustomValidity(("\n Please lengthen this text to "+minlength+" characters or more (you are\n currently using "+el.value.length+" characters).\n ").trim())}else{el.setCustomValidity("")}}return{badInput:validity.badInput,customError:validity.customError,patternMismatch:validity.patternMismatch,rangeOverflow:validity.rangeOverflow,rangeUnderflow:validity.rangeUnderflow,stepMismatch:validity.stepMismatch,tooLong:validity.tooLong,tooShort:tooShort,typeMismatch:validity.typeMismatch,valid:valid,valueMissing:validity.valueMissing}}var VueForm=function(){function VueForm(options){classCallCheck(this,VueForm);var defaults$$1={wasFocusedClass:"wasFocused",wasSubmittedClass:"wasSubmitted",noValidate:true,required:[]};Object.assign(defaults$$1,options);this.$noValidate=defaults$$1.noValidate;this.$wasFocusedClass=defaults$$1.wasFocusedClass;this.$wasSubmittedClass=defaults$$1.wasSubmittedClass;this.$requiredFields=defaults$$1.required;this.$wasSubmitted=false;this.$isInvalid=false;this.$isValid=true;this.$invalidFields=[]}createClass(VueForm,[{key:"$setCustomValidity",value:function $setCustomValidity(field,invalid){if(this[field]){var isBoolean=typeof invalid==="boolean";var isNonEmptyString=typeof invalid==="string"&&invalid.length>0;if(invalid&&(isBoolean||isNonEmptyString)){if(isNonEmptyString){this[field].customMessage=invalid;this[field].$el.setCustomValidity(invalid)}else{this[field].$el.setCustomValidity("Error")}}else{delete this[field].customMessage;this[field].$el.setCustomValidity("")}Object.assign(this[field],extractValidity(this[field].$el));this.$updateFormValidity(field)}}},{key:"$updateFormValidity",value:function $updateFormValidity(field){var index=this.$invalidFields.indexOf(field);if(this[field].valid&&index!==-1){this.$invalidFields.splice(index,1);if(this.$invalidFields.length===0){this.$isValid=true;this.$isInvalid=false}}else if(!this[field].valid&&index===-1){this.$isValid=false;this.$isInvalid=true;this.$invalidFields.push(field)}}},{key:"$isFieldRequired",value:function $isFieldRequired(name){return this.$requiredFields.filter(function(field){var isDynamic=field.name&&field.name===name&&field.required();if(field===name||isDynamic){return field}}).length>0}},{key:"$updateNamedValidity",value:function $updateNamedValidity(el,Vue){if(el.hasAttribute("name")){var name=el.getAttribute("name");if(this.$isFieldRequired(name)){var valid=this.$getNamedValue(name);var validity={valid:valid,valueMissing:!valid};if(this[name]){Object.assign(this[name],validity)}else{Vue.set(this,name,validity)}this.$updateFormValidity(name)}}}},{key:"$getNamedValue",value:function $getNamedValue(name){var elements=this.$el.querySelectorAll("[name="+name+"]");var value=void 0;var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=elements[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var el=_step.value;if(["radio","checkbox"].indexOf(el.type)!==-1){if(el.checked){if(el.type==="radio"){value=el.value;break}else if(el.type==="checkbox"){if(value){value.push(el.value)}else{value=[el.value]}}}}else if(elements.length===1){value=el.value}else if(value){value.push(el.value)}else{value=[el.value]}}}catch(err){_didIteratorError=true;_iteratorError=err}finally{try{if(!_iteratorNormalCompletion&&_iterator.return){_iterator.return()}}finally{if(_didIteratorError){throw _iteratorError}}}return value}}],[{key:"install",value:function install(Vue){Vue.directive("form",function(el,_ref){var value=_ref.value;if(value instanceof VueForm){if(!value.$el){value.$el=el;value.$el.noValidate=value.$noValidate;value.$requiredFields.forEach(function(field){return value[field.name||field]={}});value.$el.addEventListener("submit",function(){value.$wasSubmitted=true;value.$el.classList.add(value.$wasSubmittedClass)});value.$el.addEventListener("reset",function(){value.$wasSubmitted=false;value.$el.classList.remove(value.$wasSubmittedClass);var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=Object.keys(value)[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var id=_step2.value;if(id.indexOf("$")===-1&&value[id].$el){value[id].$wasFocused=false;value[id].$el.classList.remove(value.$wasFocusedClass);Object.assign(value[id],extractValidity(value[id].$el));value.$updateFormValidity(id)}}}catch(err){_didIteratorError2=true;_iteratorError2=err}finally{try{if(!_iteratorNormalCompletion2&&_iterator2.return){_iterator2.return()}}finally{if(_didIteratorError2){throw _iteratorError2}}}})}var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=el.querySelectorAll("input, textarea, select")[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var $el=_step3.value;if($el.form===el&&$el.willValidate){(function(){var id=$el.getAttribute("id");var isUnregistered=id&&!value[id];if(isUnregistered){var field=Object.assign({$el:$el},extractValidity($el));Vue.set(value,id,field);value.$updateFormValidity(id);$el.addEventListener("focus",function(_ref2){var target=_ref2.target;value[id].$wasFocused=true;target.classList.add(value.$wasFocusedClass)})}value.$updateNamedValidity($el,Vue);var type=$el.getAttribute("type");var isCheckable=["radio","checkbox"].indexOf(type)!==-1;var eventType=isCheckable?"change":"input";$el.addEventListener(eventType,function(_ref3){var target=_ref3.target;if(id){Object.assign(value[id],extractValidity(target));value.$updateFormValidity(id)}value.$updateNamedValidity(target,Vue)})})()}}}catch(err){_didIteratorError3=true;_iteratorError3=err}finally{try{if(!_iteratorNormalCompletion3&&_iterator3.return){_iterator3.return()}}finally{if(_didIteratorError3){throw _iteratorError3}}}}})}}]);return VueForm}();return VueForm}); |