danremollino/form-validation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

updated demo

Browse Source
This commit is contained in:
Dan Remollino
2025-04-11 18:44:28 -04:00
parent 57a67c7949
commit f842fbf9b9
1 changed files with 133 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@ -10,9 +10,11 @@
</head> </head>
<body class="no-transition"> <body class="no-transition">
<header>
<h1>Form Validation</h1>
</header>
<main> <main>
<section> <section>
<div style="background: var(--color-02);">
<form data-validation='{"onSuccess": "save()"}'> <form data-validation='{"onSuccess": "save()"}'>
<fieldset> <fieldset>
<legend>Native HTML Form Controls</legend> <legend>Native HTML Form Controls</legend>
@ -108,16 +110,15 @@
<figure class="form-group"> <figure class="form-group">
<label for="custom-control">Check for Text</label> <label for="custom-control">Check for Text</label>
<div data-validation='{"valueSrc": ["#custom-control", "textContent"]}' <div data-validation='{"valueSrc": ["#custom-control", "textContent"]}'
id="custom-control" name="custom_control" contenteditable class="custom-form-control" id="custom-control" name="custom_control" contenteditable>
style="background: green;">
</div> </div>
<figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption> <figcaption>This custom form control is a <code>div</code> element, not an <code>input</code> element.</figcaption>
</figure> </figure>
<figure class="form-group"> <figure class="form-group">
<label for="exists">Check for Element</label> <label for="exists">Check for Element</label>
<div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists" <div data-validation='{"valueSrc": ["#exists", "exists", ":scope > img"]}' id="exists" name="exists" class="custom-form-control"
style="border: 1px solid var(--color-01); display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div> style="display: flex; height: 3lh; justify-content: center; padding: var(--half-space); overflow: clip;" ></div>
<button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">Add an Image</button> <button type="button" onclick="document.querySelector('#exists').insertAdjacentHTML('afterbegin', '<img src=&quot;https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/src/24/solid/hand-thumb-up.svg&quot; alt=&quot;Ya good.&quot; />')">Add an Image</button>
<button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button> <button type="button" onclick="document.querySelector('#exists').innerHTML = ''">Remove Images</button>
<figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption> <figcaption>This custom form control checks if a the <code>div#exists</code> contains an <code>img</code> tag.</figcaption>
@ -131,19 +132,13 @@
<figure class="form-group"> <figure class="form-group">
<label for="not-required">Text (Optional)</label> <label for="not-required">Text (Optional)</label>
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required"> <input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
<figcaption>Optional fields will allow a blank input.</figcaption> <figcaption>Optional fields will allow blank input, but will validate non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
</figure>
<figure class="form-group">
<label for="not-required-email">Email (Optional)</label>
<input data-validation='{"optional": true}' id="not-required-email" type="email" name="not_required_email">
<figcaption>Optional fields will still be validated when there is input present.</figcaption>
</figure> </figure>
<figure class="form-group"> <figure class="form-group">
<label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small> <label for="custom">Regex Pattern Test</label> <small>(Numbers only.)</small>
<input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom"> <input data-validation='{"pattern": "^[0-9]*$", "patternMessage": "This field must only contain numbers."}' id="custom" type="text" inputmode="numeric" name="custom">
<figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The value of the field will be run against all default validation checks, then run against the pattern.</figcaption> <figcaption>This field uses a user supplied regular expression to test against and can output a custom error message. The input will validate based on the input's type attribute first, then the pattern.</figcaption>
</figure> </figure>
<figure class="form-group"> <figure class="form-group">
@ -161,9 +156,14 @@
</figure> </figure>
</fieldset> </fieldset>
</form> </form>
</div>
</section> </section>
</main> </main>
<footer>
<div class="align-center">
<a href="https://git.danremollino.dev/danremollino/form-validation">
<img src="https://git.danremollino.dev/assets/img/logo.svg" alt="Repository on Gitea" />
</a>
</div>
</footer>
</body> </body>
</html> </html>