j-Validate

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

The component contains the same source-code as the j-Validation component.

Configuration:

if {String} can contain JS condition for evaluation
- value {Object} contains entire model
- path {String} contains changed path
- must return boolean
selector {String} jQuery selector for disabling (default: button[name="submit"])
delay {Number} a timeout for validation (default: 100)
flags {String} flags for better validation, can contain visible,hidden,enabled,disabled components
- enabled validate all components which are enabled input, textarea or select elements
- disabled validate all components which are disabled input, textarea or select elements
- hidden validate all components which are hidden
- visible validate all components which are visible
track {String} can contain paths divided by the comma, and manual changing of each path (via SET(), UPD(), INC(), etc. methods) will evaluate the validation
validonly {Boolean} skips dirty state (default: false)
NEW changes {Boolean} enables comparing changes only between the input model and the form (default: false)
NEW strictchanges {Boolean} enables strict comparing changes (otherwise null, false, empty strings and 0 values will be removed), default: false
NEW exec {String} optional, a link to the function(data) that is executed when the model is validated and changed
NEW output {String} optional, a link to the function(valid) or path

Good to know:

component adds ui-validate-ok class to the element if the model is valid
component adds ui-validate-no class to the element if the model is invalid
component adds ui-validate-modified class to the element if the model is changed

Use it with <ui-component name="validate">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<!-- REMOVE -->
<ui-plugin path="model">
	<ui-component name="input" path="?.name" config="required:true">Name</ui-component>
	<br />
	<br />
	<ui-component name="validate" path="?">
		<button name="submit" disabled="disabled" onclick="show_me()">SUBMIT FORM</button>
	</ui-component>
</ui-plugin>

<style type="text/css">
	button:disabled {
		background-color: #cccccc;
		color: #666666;
		cursor: not-allowed;
	}
</style>

<script>
    function show_me() {
        alert('ok');
    }
</script>