Skip to content

Commit

Permalink
Updated readme.
Browse files Browse the repository at this point in the history
  • Loading branch information
@RillingDev
RillingDev committed Mar 15, 2021
1 parent 93cf86f commit 3571ac9
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 136 deletions.
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { Ok } from "okjs";
const ok = new Ok({
nameFirst: {
msg: "Only 'Dave' allowed",
fn: val => val === "Dave"
fn: (element) => element.value === "Dave"
},
emailDe: {
msg: (element) => `Please input your .de email (You entered '${element.value}')`,
Expand Down Expand Up @@ -61,17 +61,17 @@ The validator which will be used is defined in the DOM via data-attributes:
</form>
```

the name defined in `data-ok` is the key of the methods object defined in the JS.
The name defined in `data-ok` is the key of the validator dictionary object defined in the JS.
if the given fn evaluates to false, the input will be marked as invalid.

### Validation

Once the user inputs on a field bound by Ok.js, the validator function will be run. If it evaluates to true, the field is valid.
If it evaluates falsy, the field will be marked as invalid with the class "invalid" and the JS validity will be updated (which will show a popup containing the validator message, based on the browser).
Once the user inputs on a field bound by Ok, the validator function will be run. If it evaluates to true, the field is valid.
If it evaluates falsy, the field will be marked as invalid, and the JS validity will be updated (which will show a popup containing the validator message, based on the browser).

### Chaining

Multiple validators can be used for a single field in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed.
Multiple validators can be used for a single field in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed. Once a validator marks the field as invalid, all further validators are skipped.

```html
<div class="form-group">
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/js/search.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

63 changes: 10 additions & 53 deletions docs/classes/ok.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2711,12 +2711,9 @@
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="ok.html#bind" class="tsd-kind-icon">bind</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="ok.html#validate" class="tsd-kind-icon">validate</a>
</li>
</ul>
</li>
<li class=" tsd-kind-interface">
<li class=" tsd-kind-interface tsd-has-type-parameter">
<a href="../interfaces/validator.html" class="tsd-kind-icon">Validator</a>
</li>
<li class=" tsd-kind-interface">
Expand Down Expand Up @@ -2755,7 +2752,6 @@ <h3>Constructors</h3>
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ok.html#bind" class="tsd-kind-icon">bind</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="ok.html#validate" class="tsd-kind-icon">validate</a></li>
</ul>
</section>
</div>
Expand All @@ -2767,13 +2763,13 @@ <h2>Constructors</h2>
<a name="constructor" class="tsd-anchor"></a>
<h3>constructor</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Ok<span class="tsd-signature-symbol">(</span>validators<span class="tsd-signature-symbol">: </span><a href="../interfaces/validatordictionary.html" class="tsd-signature-type" data-tsd-kind="Interface">ValidatorDictionary</a>, invalidClass<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ok.html" class="tsd-signature-type" data-tsd-kind="Class">Ok</a></li>
<li class="tsd-signature tsd-kind-icon">new <wbr>Ok<span class="tsd-signature-symbol">(</span>validators<span class="tsd-signature-symbol">: </span><a href="../interfaces/validatordictionary.html" class="tsd-signature-type" data-tsd-kind="Interface">ValidatorDictionary</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ok.html" class="tsd-signature-type" data-tsd-kind="Class">Ok</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in Ok.ts:18</li>
<li>Defined in Ok.ts:16</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
Expand All @@ -2789,9 +2785,6 @@ <h5>validators: <a href="../interfaces/validatordictionary.html" class="tsd-sign
<p>Object containing the validators to use.</p>
</div>
</li>
<li>
<h5>invalidClass: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> = &quot;invalid&quot;</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="ok.html" class="tsd-signature-type" data-tsd-kind="Class">Ok</a></h4>
</li>
Expand All @@ -2804,72 +2797,36 @@ <h2>Methods</h2>
<a name="bind" class="tsd-anchor"></a>
<h3>bind</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">bind<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLInputElement</span>, eventType<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
<li class="tsd-signature tsd-kind-icon">bind<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ValidatableElement</span>, eventType<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in Ok.ts:93</li>
<li>Defined in Ok.ts:35</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Binds a {@link Ok#validate} event handler to an input element.</p>
<p>Binds a {@link Ok#validate} event handler to a validatable element.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLInputElement</span></h5>
<h5>element: <span class="tsd-signature-type">ValidatableElement</span></h5>
<div class="tsd-comment tsd-typography">
<p>HTMLInputElement to bind.</p>
<p>ValidatableElement to bind an event to.</p>
</div>
</li>
<li>
<h5>eventType: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = &quot;input&quot;</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="validate" class="tsd-anchor"></a>
<h3>validate</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">validate<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLInputElement</span>, e<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Event</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in Ok.ts:44</li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Validates an input element and returns if it was valid.
Usually called through {@link Ok#bind}.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLInputElement</span></h5>
<div class="tsd-comment tsd-typography">
<p>HTMLInputElement to validate.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> e: <span class="tsd-signature-type">Event</span></h5>
<div class="tsd-comment tsd-typography">
<p>optional event that triggered validation.</p>
<p>Event type to bind. Recommended is either &#39;input&#39; or &#39;change&#39;. Defaults to &#39;input&#39;.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>current validity of the element.</p>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
Expand Down

0 comments on commit 3571ac9

Please sign in to comment.