BW Validation

BW Validation allows you to initialise an input for use with BW Form and can display custom messages and notices for each input in real-time. It also displays an SVG and uses Greensock's MorphSVGPlugin to tween between 2 paths. By default this is a tick and a cross.

/config/config.static.php

 
$jsPlugins = array(
	"all"=>array("bwValidation")
);

//remember to include morphSVG from Greensock
layout::$loadDeps=array(
	"gsap"=>array(
		"extras"=>array(
			"MorphSVG"=>array(
				"inline"=>true
			)
		)
	)
);
	 

Javascript usage:

/config/config.static.php

 
$("#inputID").bwValidation(vFunction,options);

//trigger valid
$("#inputID").bwValidation("valid");

//trigger error
$("#inputID").bwValidation("error");
	 

bwValidation

BW Validation initialisation variables

Variable/Key
Type
Default
Description
vFunction
function
null

This can also be set to pre-defined strings for commonly used functions. The predefined strings you can use are:

  • required (must not be empty)
  • email (syntax checker)
  • telephone (minimum of 8 digits in string)
  • none (always return successful for the 'tick')

Otherwise your function should return true or false. The event is an extension of the input event (blur, keypress etc.) with another parameter for the input's value. E.g. function definition - function checkMessage(event,inputValue){return true;}

bwValidation Options

The keys for the bwValidation options object that you can use in your options when initialising.

Variable/Key
Type
Default
Description
showSoftError
boolean
false
set to true to soft errors. Soft errors are when there is no current error on the input, during a key event (not a blur or paste) and when the input is detected as invalid
iconColors
object
{
  valid:'#089e2b',
  error:'#ff0072'
}
you can change these hex colour values to change your valid and invalid SVG fill colours.
cross
string
[cross SVG Path]
you can change this to adjust the path being used for an invalid input in the SVG with viewBox 0 0 512 512
tick
string
[tick SVG Path]
you can change this to adjust the path being used for a valid input in the SVG with viewBox 0 0 512 512
required
boolean
false
set to true if the input is required
requiredMessage
string
"Sorry, this input is required"
the message to display if the 'required' validation fails
overwrite
boolean
false
set to true if you are calling initialisation again and want to rewrite validation instead of extend it.

bwValidation options.errorInfo

variable keys for a options.errorInfo object

Variable/Key
Type
Default
Description
$element
jQuery object
null
a jQuery element object to display your error in
message
string
"Sorry, this input is not valid"
set to the error message that you want to display if validation fails

bwValidation options.errorInfo.wrapper

Variable/Key
Type
Default
Description
$element
jQuery object
null
a jQuery element object that is wrapping your error message and input
cssProperty
string
null
a CSS property to update on the wrapper.$element to match the error message element's height
classes
object
{
  valid:"isValid",
  error:"isError"
}
classes to append to the wrapper after a validation response