Skip to content

JavaScript Development

Rob Johnston edited this page Mar 4, 2016 · 5 revisions

DRAFT

Events

wb-ready.wb (v4.0.5+)

Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing.

Using JQuery to bind an event to wb-ready.wb

$( document ).on( "wb-ready.wb", function( event ) {
  //Code goes here
});

Using Vanilla JS to bind an event to wb-ready.wb *Note: this will only work if your browser supports addEventListener More at MDN addEventListener

document.addEventListener("wb-ready.wb", function( event ) { 
  //Code goes here
});

Examples

Adding a custom validator

The pattern attribute is only included as a fallback for when jQuery validation doesn't load as jQuery validation doesn't take the pattern attribute into account when initializing a form field. You can't rely upon the pattern attribute alone as you would also need to use one of the pre-defined validation options or create your own custom validation. For example, to validate a field that consists of 8 numbers with a dash in the middle:

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
	...
	<div class="form-group">
		<label for="text1"><span class="field-name">Client ID</span> (0000-0000)</label>
		<input class="form-control client-valid" id="text1" name="text1" type="text" pattern="[\d{4}-\d{4}]{9,9}" />
	</div>
	...
	<script type="text/javascript">
		wb.doc.on("wb-ready.wb", function (event) {
			jQuery.validator.addMethod("client-valid", function (value, element) {
			return this.optional(element) || /^\d{4}-\d{4}$/.test(value);
			}, 'Please specify a valid client ID.');
		});
	</script>
Clone this wiki locally