add custom callback example to demo

Author: joshstoik1

demo/assets/demo.min.js

@@ -218,6 +218,29 @@ <h1>vue-blob-forms</h1>
 							<div class="error-message" v-if="formErrors('demo', 'multiselectField')">{{ formErrors('demo', 'multiselectField') }}</div>
 						</td>
 					</tr>
+					<tr>
+						<td>
+							<label for="demo-beatleField">Custom</label>
+						</td>
+						<td>
+							<input v-model.trim="fields.beatle" type="text" maxlength="50" required name="beatleField" data-validation-callback="validateBeatlesMovie" placeholder="Enter a Beatles movie." id="demo-beatleField" />
+						</td>
+						<td>
+							<span v-if="formTouched('demo', 'beatleField')">Yes</span>
+							<span v-else class="fg-black-light">No</span>
+						</td>
+						<td>
+							<span v-if="formChanged('demo', 'beatleField')">Yes</span>
+							<span v-else class="fg-black-light">No</span>
+						</td>
+						<td>
+							<span v-if="formValid('demo', 'beatleField')" class="fg-green">Yes</span>
+							<span v-else class="fg-red">No</span>
+						</td>
+						<td>
+							<div class="error-message" v-if="formErrors('demo', 'beatleField')">{{ formErrors('demo', 'beatleField') }}</div>
+						</td>
+					</tr>
 					<tr v-if="showingToggle">
 						<td>
 							<label for="demo-toggLefield">Toggled</label>

demo/index.html

@@ -14,6 +14,7 @@ var app = new Vue({
 	el: '#vue-app',
 	data: {
 		fields: {
+			beatle: 'Yellow Submarine',
 			date: '2020-01-01',
 			email: '',
 			number: 0,
@@ -29,8 +30,24 @@ var app = new Vue({
 		numMin: 1,
 		numMax: 10,
 		showingToggle: false,
+		beatlesMovies: [
+			"aharddaysnight",
+			"help",
+			"magicalmysterytour",
+			"yellowsubmarine",
+			"letitbe",
+		]
 	},
 	methods: {
+		// See if a film is part of the Beatles' catalogue or not.
+		validateBeatlesMovie: function(film) {
+			film = (film + '').trim().toLowerCase().replace(/[^a-z]/g, '');
+			if (this.beatlesMovies.indexOf(film) !== -1) {
+				return true;
+			}
+
+			return 'A valid Beatles movie title is required.';
+		}
 	},
 });