# j-Validate

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: a6625dcae76fb0568325a6b98c518ee5e64b39cfb998515a91a993bcd4a3e397
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```html 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>
```