Skip to content

Commit

Permalink
docs(examples): 📝 update the examples: add contenteditable field
Browse files Browse the repository at this point in the history
  • Loading branch information
@simplymichael
simplymichael committed Dec 16, 2023
1 parent 8d4b847 commit 98e7b3a
Show file tree
Hide file tree
Showing 8 changed files with 322 additions and 232 deletions.
2 changes: 1 addition & 1 deletion examples/demo-signup-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</head>
<body>
<ul>
<li><a href="./">Back</a></li>
<li><a href="./">Examples home</a></li>
</ul>

<form id="signup-form" autocomplete="off">
Expand Down
67 changes: 67 additions & 0 deletions examples/esm/form-elements.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<Doctype html>

<html>
<head>
<title>Smart Form Validator - ES Module Examples</title>
<link rel="stylesheet" href="../../dist/css/smart-form-validator.min.css" />
<link rel="stylesheet" href="../examples.css" />
</head>
<body>
<ul>
<li><a href="./">Back</a></li>
</ul>

<h3>Input elements belonging to an HTML form</h3>
<form id="test-form">
<input type="text" id="name-field" role="presentation" autocomplete="off" placeholder="Firstname" />
<input type="email" id="email-field" role="presentation" autocomplete="off" placeholder="Email" />
<button id="submit-form-button" role="submit-button">Submit Form</button>
</form>

<script type="module">
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator

const form = document.getElementById("test-form");
const name = document.getElementById("name-field");
const email = document.getElementById("email-field");

// When a form has an `<input type="submit" or
// an element with `role="submit-button",
// adding the submit button via `addField()` is optional.
new SmartFormValidator()
.addForm(form)
.addRule({ field: name, length: { min: 3, max: 5 } })
.addRule({ field: "email-field", type: "email" })
.watch();
</script>

<h3>Code</h3>
<code>
&lt;form id="test-form"&gt; <br />
&nbsp;&nbsp;&lt;input type="text" id="name-field" /&gt; <br />
&nbsp;&nbsp;&lt;input type="email" id="email-field" /&gt; <br />
&nbsp;&nbsp;&lt;button id="submit-form-button" role="submit-button">Submit Form&lt;/button&gt; <br />
&lt;/form&gt; <br /><br />

&lt;script type="module"&gt; <br />
&sol;&sol; import `SmartFormValidator` <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js";
<br /><br />

const form = document.getElementById("test-form"); <br />
const name = document.getElementById("name-field"); <br />
const email = document.getElementById("email-field"); <br /><br />

&sol;&sol; When a form has an `&lt;input type="submit" or <br />
&sol;&sol; an element with `role="submit-button", <br />
&sol;&sol; adding the submit button via `addField()` is optional. <br />
new SmartFormValidator() <br />
&nbsp;&nbsp;.addForm(form) <br />
&nbsp;&nbsp;.addRule({ field: name, length: { min: 3, max: 5 } }) <br />
&nbsp;&nbsp;.addRule({ field: &quot;email-field&quot;, type: &quot;email&quot; }) <br />
&nbsp;&nbsp;.watch(); <br />
&lt;/script&gt;
</code>
<br /><br />
</body>
</html>
122 changes: 3 additions & 119 deletions examples/esm/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,13 @@
<Doctype html>

<html>
<head>
<title>Smart Form Validator - ES Module Examples</title>
<link rel="stylesheet" href="../../dist/css/smart-form-validator.min.css" />
<link rel="stylesheet" href="../examples.css" />
</head>
<body>
<ul>
<li><a href="../">Back</a></li>
<li><a href="../">Examples home</a></li>
<li><a href="isolated-elements.html">Stand-alone input elements</a></li>
<li><a href="form-elements.html">Input elements as part of a form</a></li>
</ul>

<h3>Stand-alone input elements</h3>
<div>
<input id="firstname-field" type="text" role="presentation" autocomplete="off" placeholder="Firstname" />
<input id="accept-terms-field" type="checkbox" /> Accept terms
</div>

<input id="submit-button" type="submit" value="Submit Form" />

<script type="module">
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator module

const firstnameField = document.getElementById("firstname-field");
const acceptTermsField = document.getElementById("accept-terms-field");
const firstnameRule = { length: { min: 3, max: 5 } };
const acceptTermsRule = { type: "checkbox", required: true };
const submitButton = document.getElementById("submit-button");
const formValidator = new SmartFormValidator();

formValidator.addField(firstnameField, firstnameRule);
formValidator.addField(acceptTermsField, acceptTermsRule);
formValidator.addField(submitButton);
formValidator.watch();
</script>

<p>&nbsp;</p>

<h3>Code</h3>
<code>
&lt;head&gt; <br />
&nbsp;&nbsp;&lt;link <br />
&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;rel="stylesheet" /&gt; <br />
&lt;/head&gt; <br /><br />
...
<br /><br />
&lt;input id="firstname-field" type="text" /&gt; <br />
&lt;input id="accept-terms-field" type="checkbox" /&gt; Accept terms <br />
&lt;input id="submit-button" type="submit" value="Submit Form" /&gt; <br /><br />

&lt;script type="module"&gt; <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js"; &sol;&sol; import the SmartFormValidator
<br /><br />

const firstnameField = document.getElementById("firstname-field"); <br />
const acceptTermsField = document.getElementById("accept-terms-field"); <br />
const firstnameRule = { length: { min: 3, max: 5 } }; <br />
const acceptTermsRule = { type: "checkbox", required: true }; <br />
const submitButton = document.getElementById("submit-button"); <br />
const formValidator = new SmartFormValidator(); <br /><br />

formValidator.addField(firstnameField, firstnameRule); <br />
formValidator.addField(acceptTermsField, acceptTermsRule); <br />
formValidator.addField(submitButton); <br />
formValidator.watch(); <br />
&lt;/script&gt;
</code>

<br /><br />

<hr />

<h3>Input elements belonging to an HTML form</h3>
<form id="test-form">
<input type="text" id="name-field" role="presentation" autocomplete="off" placeholder="Firstname" />
<input type="email" id="email-field" role="presentation" autocomplete="off" placeholder="Email" />
<button id="submit-form-button" role="submit-button">Submit Form</button>
</form>

<script type="module">
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator

const form = document.getElementById("test-form");
const name = document.getElementById("name-field");
const email = document.getElementById("email-field");

// When a form has an `<input type="submit" or
// an element with `role="submit-button",
// adding the submit button via `addField()` is optional.
new SmartFormValidator()
.addForm(form)
.addRule({ field: name, length: { min: 3, max: 5 } })
.addRule({ field: "email-field", type: "email" })
.watch();
</script>

<h3>Code</h3>
<code>
&lt;form id="test-form"&gt; <br />
&nbsp;&nbsp;&lt;input type="text" id="name-field" /&gt; <br />
&nbsp;&nbsp;&lt;input type="email" id="email-field" /&gt; <br />
&nbsp;&nbsp;&lt;button id="submit-form-button" role="submit-button">Submit Form&lt;/button&gt; <br />
&lt;/form&gt; <br /><br />

&lt;script type="module"&gt; <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js"; &sol;&sol; import the SmartFormValidator
<br /><br />

const form = document.getElementById("test-form"); <br />
const name = document.getElementById("name-field"); <br />
const email = document.getElementById("email-field"); <br /><br />

&sol;&sol; When a form has an `&lt;input type="submit" or <br />
&sol;&sol; an element with `role="submit-button", <br />
&sol;&sol; adding the submit button via `addField()` is optional. <br />
new SmartFormValidator() <br />
&nbsp;&nbsp;.addForm(form) <br />
&nbsp;&nbsp;.addRule({ field: name, length: { min: 3, max: 5 } }) <br />
&nbsp;&nbsp;.addRule({ field: &quot;email-field&quot;, type: &quot;email&quot; }) <br />
&nbsp;&nbsp;.watch(); <br />
&lt;/script&gt;
</code>

<br /><br /><br />

</body>
</html>
80 changes: 80 additions & 0 deletions examples/esm/isolated-elements.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<Doctype html>

<html>
<head>
<title>Smart Form Validator - ES Module Examples</title>
<link rel="stylesheet" href="../../dist/css/smart-form-validator.min.css" />
<link rel="stylesheet" href="../examples.css" />
</head>
<body>
<ul>
<li><a href="./">Back</a></li>
</ul>

<h3>Stand-alone input elements</h3>
<div>
<input id="firstname-field" type="text" role="presentation" autocomplete="off" placeholder="Firstname" />
<p id="free-text-paragraph" contenteditable="true" data-placeholder="contenteditable field"></p>
</div>

<div>
<input id="accept-terms-field" type="checkbox" /> Accept terms
</div>

<input id="submit-button" type="submit" value="Submit Form" />

<script type="module">
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator module

const firstnameField = document.getElementById("firstname-field");
const acceptTermsField = document.getElementById("accept-terms-field");
const firstnameRule = { length: { min: 3, max: 5 } };
const acceptTermsRule = { type: "checkbox", required: true };
const submitButton = document.getElementById("submit-button");
const formValidator = new SmartFormValidator();

formValidator.addField(firstnameField, firstnameRule);
formValidator.addField("free-text-paragraph", { type: "ascii", length: { min: 5, max: 50 } });
formValidator.addField(acceptTermsField, acceptTermsRule);
formValidator.addField(submitButton);
formValidator.watch();
</script>

<p>&nbsp;</p>

<h3>Code</h3>
<code>
&lt;head&gt; <br />
&nbsp;&nbsp;&lt;link <br />
&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;rel="stylesheet" /&gt; <br />
&lt;/head&gt; <br /><br />
...
<br /><br />
&lt;input id="firstname-field" type="text" /&gt; <br />
&lt;p id="free-text-paragraph" contenteditable="true"&gt;&lt;/p&gt; <br />
&lt;input id="accept-terms-field" type="checkbox" /&gt; Accept terms <br />
&lt;input id="submit-button" type="submit" value="Submit Form" /&gt; <br /><br />

&lt;script type="module"&gt; <br />
&sol;&sol; import `SmartFormValidator` <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js";
<br /><br />

const firstnameField = document.getElementById("firstname-field"); <br />
const acceptTermsField = document.getElementById("accept-terms-field"); <br />
const firstnameRule = { length: { min: 3, max: 5 } }; <br />
const acceptTermsRule = { type: "checkbox", required: true }; <br />
const submitButton = document.getElementById("submit-button"); <br />
const formValidator = new SmartFormValidator(); <br /><br />

formValidator.addField(firstnameField, firstnameRule); <br />
formValidator.addField("free-text-paragraph", { type: "ascii", length: { min: 5, max: 50 } }); <br />
formValidator.addField(acceptTermsField, acceptTermsRule); <br />
formValidator.addField(submitButton); <br />
formValidator.watch(); <br />
&lt;/script&gt;
</code>
<br /><br />
</body>
</html>
18 changes: 18 additions & 0 deletions examples/examples.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
body {
display: flex;
flex-direction: column;
align-items: center;
}
form { text-align: center; }
div { margin-bottom: 10px; }
[contenteditable="true"], [contenteditable="true"]:focus {
border: thin dotted #ccc !important;
padding: 5px 10px;
padding-right: 0;
border-radius: 3px;
max-width: 240px;
cursor: auto;
}
[contenteditable="true"]:empty:not(:focus)::before {
content:attr(data-placeholder);
font-style: italic;
color: #aaa;
}
form p.descriptor {
display: inline-block;
width: 250px;
Expand Down
73 changes: 73 additions & 0 deletions examples/umd/form-elements.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<Doctype html>

<html>
<head>
<title>Smart Form Validator - Browser Examples</title>
<link rel="stylesheet" href="../../dist/css/smart-form-validator.min.css" />
<link rel="stylesheet" href="../examples.css" />
<script type="text/javascript" src="../../dist/smart-form-validator.js"></script>
</head>
<body>
<ul>
<li><a href="./">Back</a></li>
</ul>

<h3>Input elements belonging to an HTML form</h3>
<form id="test-form" style="text-align: left;">
<input type="text" id="name-field" role="presentation" autocomplete="off" placeholder="Enter your name" />
<input type="email" id="email-field" role="presentation" autocomplete="off" placeholder="Enter your email" />
<button id="submit-form-button" role="submit-button">Submit Form</button>
</form>

<script type="text/javascript">
const form = document.getElementById("test-form");
const name = document.getElementById("name-field");
const email = document.getElementById("email-field");

// When a form has an `<input type="submit" or
// an element with `role="submit-button",
// adding the submit button via `addField()` is optional.
new SmartFormValidator()
.addForm(form)
.addRule({ field: name, length: { min: 3, max: 5 } })
.addRule({ field: "email-field", type: "email" })
.watch();
</script>

<p>&nbsp;</p>

<h3>Code</h3>
<code>
&lt;head&gt; <br />
&nbsp;&nbsp;&lt;link <br />
&nbsp;&nbsp;&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;&nbsp;&nbsp;rel="stylesheet" /&gt; <br />

&nbsp;&nbsp;&lt;script src="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/smart-form-validator.min.js"&gt;&lt;/script&gt; <br />
&lt;/head&gt; <br /><br />
...
<br /><br />
&lt;form id="test-form"&gt; <br />
&nbsp;&nbsp;&lt;input type="text" id="name-field" /&gt; <br />
&nbsp;&nbsp;&lt;input type="email" id="email-field" /&gt; <br />
&nbsp;&nbsp;&lt;button id="submit-form-button" role="submit-button">Submit Form&lt;/button&gt; <br />
&lt;/form&gt; <br /><br />

&lt;script type="text/javascript"&gt; <br />
const form = document.getElementById("test-form"); <br />
const name = document.getElementById("name-field"); <br />
const email = document.getElementById("email-field"); <br /><br />

&sol;&sol; When a form has an `&lt;input type="submit" or <br />
&sol;&sol; an element with `role="submit-button", <br />
&sol;&sol; adding the submit button via `addField()` is optional. <br />
new SmartFormValidator() <br />
&nbsp;&nbsp;.addForm(form) <br />
&nbsp;&nbsp;.addRule({ field: name, length: { min: 3, max: 5 } }) <br />
&nbsp;&nbsp;.addRule({ field: &quot;email-field&quot;, type: &quot;email&quot; }) <br />
&nbsp;&nbsp;.watch(); <br />
&lt;/script&gt;
</code>
<br /><br />
</body>
</html>
Loading

0 comments on commit 98e7b3a

Please sign in to comment.