add this.formOtherErrors() method

Author: joshstoik1

README.md

@@ -46,6 +46,7 @@ Name attributes are required for all forms and form fields. Any element without
 </form>
 ```
 
+
 ### Method: formErrors()
 
 This method can be used to retrieve all errors for a given form, or an error for a single form field.
@@ -66,12 +67,35 @@ When `fieldName` is passed, the method will return the error corresponding to th
 #### Example
 
 ```html
-<div v-if="formErrors('myForm', 'myField')" class="error">
+<div v-if="false !== formErrors('myForm', 'myField')" class="error">
     {{ formErrors('myForm', 'myField') }}
 </div>
 ```
 
 
+### Method: formOtherErrors()
+
+This method returns any errors *not* corresponding to field names, or `FALSE` if there are none.
+
+#### Arguments
+
+| Type | Name | Description |
+| ---- | ---- | ----------- |
+| *string* | formName | The name of the form. |
+
+#### Returns
+
+This method returns any errors *not* corresponding to field names, or `FALSE` if there are none.
+
+#### Example
+
+```html
+<div v-if="false !== formOtherErrors('myForm')" v-for="(error, key) in formOtherErrors('myForm')" class="error">
+    {{ key }}: {{ error }}
+</div>
+```
+
+
 ### Method: setFormErrors()
 
 This method can be used to set arbitrary form errors. The errors do not necessarily need to correspond to a field, but the form must be a valid `v-form` element.
@@ -97,6 +121,7 @@ var errors = {
 this.setFormErrors('myForm', errors);
 ```
 
+
 ### Method: formTouched()
 
 This method can be used to determine whether or not a form or a specific field has been "touched".
@@ -122,16 +147,19 @@ When `fieldName` is passed, `TRUE` or `FALSE` are returned based on the state of
 <input type="text" v-bind:class="{ touched: formTouched('myForm', 'myField') }" name="myField" />
 ```
 
+
 ### Method: formChanged()
 
 This method works just like [formTouched()](#method-formtouched), but says whether or not field values have changed since the form was first initialized.
 
+
 ### Method: formValid()
 
 This method works just like [formTouched()](#method-formtouched), but says whether or not field values are valid.
 
 Note: during automatic validation, if a field is required _and_ empty, it will only trigger an invalid state _if_ it has been touched. Because of this, it is recommended you call the [validateForm()](#method-validateform) method prior to submission, which will force-touch all fields and rerun validation accordingly.
 
+
 ### Method: validateForm()
 
 This method force-touches all form fields, reruns validation, and returns `TRUE` if everything is happy, or `FALSE` if one or more fields are sad.
@@ -166,6 +194,7 @@ submitForm = function() {
 }
 ```
 
+
 ### Custom Validation Callbacks
 
 Aside from the standard [Constraints](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) like `required` and `minlength` and whatnot, you can also specify any arbitrary Vue callback function by adding `data-validation-callback="myVueMethod"` to a field.

demo/assets/demo.min.js

@@ -317,13 +317,24 @@ <h1>vue-blob-forms</h1>
 							</div>
 						</td>
 					</tr>
+					<tr v-if="false !== formOtherErrors('demo')">
+						<th scope="row">Non-Field Errors</th>
+						<td colspan="4"></td>
+						<td>
+							<div class="error-message" v-for="(error, field) in formOtherErrors('demo')">
+								<strong>{{ field }}:</strong><br>
+								{{ error }}
+							</div>
+						</td>
+					</tr>
 				</tfoot>
 			</table>
 		</form>
 
 		<div class="demo--actions">
 			<button v-on:click.prevent="validateForm('demo')" class="fg-white bg-pink bg-purple-hover">Check All</button>
 			<button v-on:click.prevent="showingToggle = !showingToggle" class="fg-white bg-blue bg-purple-hover">Toggle Field</button>
+			<button v-on:click.prevent="otherError" class="fg-white bg-blue bg-purple-hover">Non-field Error</button>
 		</div>
 	</div><!--#vue-app-->
 
@@ -334,4 +345,4 @@ <h1>vue-blob-forms</h1>
 	<script src="assets/demo.min.js"></script>
 
 </body>
-</html>
+</html>

demo/assets/vue-blob-forms.min.js

@@ -47,8 +47,12 @@ var app = new Vue({
 			}
 
 			return 'A valid Beatles movie title is required.';
-		}
+		},
+		// Arbitrary error.
+		otherError: function() {
+			this.setFormErrors('demo', {miscError: 'This is a random non-field error.'});
+		},
 	},
 });
 
-})();
+})();

demo/index.html

@@ -3,7 +3,7 @@
  *
  * This is a Vue plugin for providing form validation.
  *
- * @version 0.2.0
+ * @version 0.2.1
  * @author Blobfolio, LLC <hello@blobfolio.com>
  * @package vue-blob-forms
  * @license WTFPL <http://www.wtfpl.net>
@@ -388,6 +388,51 @@
 			return errors;
 		};
 
+		/**
+		 * Unattached Form Errors
+		 *
+		 * Return any form errors whose keys do not directly correspond
+		 * to a field name.
+		 *
+		 * @param string Form name.
+		 * @return mixed Errors or false.
+		 */
+		Vue.prototype.formOtherErrors = function(name) {
+			// Make sure the form is valid.
+			if (!name || (typeof this.blobForms[name] === 'undefined')) {
+				return false;
+			}
+
+			var errors = this.blobErrors[name] || {},
+				errorKeys = Object.keys(errors);
+
+			// We have no errors.
+			if (!errorKeys.length) {
+				return false;
+			}
+
+			var fields = _getFields(this.blobForms[name].el),
+				fieldKeys = [],
+				i;
+			for (i=0; i<fields.length; i++) {
+				var fieldName = fields[i].getAttribute('name') || '';
+				if (fieldName) {
+					fieldKeys.push(fieldName);
+				}
+			}
+
+			var out = {};
+			var found = false;
+			for (i = 0; i < errorKeys.length; i++) {
+				if (fieldKeys.indexOf(errorKeys[i]) === -1) {
+					out[errorKeys[i]] = errors[errorKeys[i]];
+					found = true;
+				}
+			}
+
+			return found ? out : false;
+		};
+
 		/**
 		 * Form/Field Touched
 		 *
@@ -1525,4 +1570,4 @@
 		window.Vue.use(BlobFormsVue);
 	}
 
-})();
+})();