Skip to content

Commit

Permalink
docs: update form example
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielmatthew
danielmatthew committed Jun 24, 2021
1 parent 14444e3 commit 6a9bd64
Show file tree
Hide file tree
Showing 11 changed files with 279 additions and 126 deletions.
8 changes: 4 additions & 4 deletions docs/assets/FormValidatorA.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,19 @@ FormValidator.prototype.showInlineErrors = function() {
,

FormValidator.prototype.showInlineError = function(t) {
var e = '<span class="field-error text-danger"><i class="fas fa-exclamation-triangle"></i> ' + FormValidator.escapeHtml(t.message) + "</span>"
var e = '<span class="field-error--new text-danger"> ' + FormValidator.escapeHtml(t.message) + "</span>"
, o = $("#" + t.fieldName)
, i = o.parents(".field")
, n = i.find("label")
, s = i.find("legend");
i.find(".field-error").remove(),
i.find(".field-error--new").remove(),
s.length ? (s.append(e),
i.attr("aria-invalid", "true")) : (n.append(e),
i.attr("aria-invalid", "true")) : (i.append(e),
o.attr("aria-invalid", "true"))
}
,
FormValidator.prototype.removeInlineErrors = function() {
$(this.form).find(".field-error").remove(),
$(this.form).find(".field-error--new").remove(),
$(this.form).find("[aria-invalid]").attr("aria-invalid", "false")
}
,
Expand Down
4 changes: 1 addition & 3 deletions docs/assets/css/talis.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/talis.css.map
View file

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions docs/assets/example-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,38 @@ validator.addValidator("message", [
message: "Your message cannot exceed 240 characters.",
},
]);
validator.addValidator("date--start", [
{
method: function (field) {
return field.value.length > 0;
},
message: "A rather lengthy string as if this text has been translated into a very verbose language. There is lots going on here.",
}
]);
validator.addValidator("date--end", [
{
method: function (field) {
return field.value.length > 0;
},
message: "End date cannot be empty.",
}
]);

const messageBox = new CharacterCountdown(document.getElementById('message'), {maxLength: 240});
const password = new PasswordRevealer(document.getElementById('password'))

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
11 changes: 1 addition & 10 deletions docs/forms/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,7 @@


<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms A</a>
</li>






<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsB/">Forms B</a>
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms</a>
</li>

<li class="nav-item">
Expand Down
124 changes: 79 additions & 45 deletions docs/formsA/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,7 @@


<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/bootstrap-theme/formsA/">Forms A</a>
</li>






<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsB/">Forms B</a>
<a class="nav-link active" aria-current="page" href="/bootstrap-theme/formsA/">Forms</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -131,8 +122,7 @@ <h1>Forms A</h1>

<div class="row">
<div class="col-md-8">
<form id="registration" novalidate>

<form id="registration" class="needs-validation" novalidate>
<div
tabindex="-1"
role="group"
Expand All @@ -142,41 +132,40 @@ <h1>Forms A</h1>

<fieldset>
<legend>Your details</legend>
<div class="alert alert-info">
<div class="help-block--new">
Here is some instructional text about completing this input successfully.
</div>
<div class="row">

<div class="form-group field col-6">
<label class="form-label" for="name">Name</label>
<input
class="form-control"
type="text"
name="name"
id="name"
autocomplete="given-name"
/>
</div>
<div class="form-group field col-6">
<label class="form-label" for="name">Name</label>
<input
class="form-control"
type="text"
name="name"
id="name"
autocomplete="given-name"
/>
</div>
</div>

<div class="row">
<div class="form-group field col-6">
<label class="form-label" for="email">
<span class="field-label"
>Email <span class="field-required">(Required)</span></span
>
<span class="field-hint">A valid email address</span>
</label>
<input
class="form-control"
type="email"
name="email"
id="email"
autocomplete="email"
aria-required="true"
/>
<div class="row">
<div class="form-group field col-6">
<label class="form-label" for="email">
<span class="field-label"
>Email <span class="field-required">(Required)</span></span
>
<span class="field-hint">A valid email address</span>
</label>
<input
class="form-control"
type="email"
name="email"
id="email"
autocomplete="email"
aria-required="true"
/>
</div>
</div>
</div>
<div class="row">

<div class="form-group field col-6">
Expand All @@ -196,8 +185,7 @@ <h1>Forms A</h1>
</div>
</div>

<div class="row">

<div class="row">
<div class="form-group field">
<label class="form-label" for="otp">
<span class="field-label">One-time code <span class="field-required">(Required)</span></span>
Expand All @@ -214,10 +202,56 @@ <h1>Forms A</h1>
max-length="6"
/>
</div>
</div>

</fieldset>

<fieldset>
<legend>Date ranges</legend>

<div class="row">

<div class="col-auto">
<p class="help-block--new my-2">
Here is some instructional text about completing this input successfully.
</p>
</div>
</fieldset>
</div>

<div class="row">
<div class="row">
<div class="col-sm-3">
<div class="form-group field">
<label class="form-label" for="date--start">
<span class="field-label">Start date <span class="field-required">(Required)</span></span>
</label>

<div class="input-group mb-3">
<input id="date--start" required type="text" class="form-control" placeholder="YYYY-MM-DD" aria-label="Recipient's username" aria-describedby="button-addon-start">
<button class="btn btn-outline-primary" type="button" id="button-addon-start">
<div class="visually-hidden">Open date picker</div>
<i class="far fa-calendar-alt"></i></button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group field">

<label class="form-label" for="date--end">
<span class="field-label">End date <span class="field-required">(Required)</span></span>
</label>

<div class="input-group mb-3">
<input id="date--end" type="text" required class="form-control" placeholder="YYYY-MM-DD" aria-describedby="button-addon-end">
<button class="btn btn-outline-primary" type="button" id="button-addon-end">
<div class="visually-hidden">Open date picker</div>
<i class="far fa-calendar-alt"></i></button>
</div>
</div>
</div>
</div>
</fieldset>

<div class="row">
<div class="form-group field col-6">
<label class="form-label" for="custom-select-again">
<span class="field-label">Options</span>
Expand Down
54 changes: 41 additions & 13 deletions docs/formsB/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,7 @@


<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms A</a>
</li>









<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/bootstrap-theme/formsB/">Forms B</a>
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms</a>
</li>

<li class="nav-item">
Expand Down Expand Up @@ -216,6 +204,46 @@ <h1>Forms B</h1>
/>
</div>
</div>

<div class="row">
<div class="col-auto">
<p class="help-block--new">
Here is some instructional text about completing this input successfully.
</p>
</div>
</div>

<div class="row">
<div class="col-sm-3">
<div class="form-group field">
<label class="form-label" for="date--start">
<span class="field-label">Start date <span class="field-required">(Required)</span></span>
</label>
<div class="input-group mb-3">
<input id="date--start" required type="text" class="form-control" placeholder="YYYY-MM-DD" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-primary" type="button" id="button-addon2">
<div class="visually-hidden">Open date picker</div>
<i class="far fa-calendar-alt"></i></button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group field">

<label class="form-label" for="date--end">
<span class="field-label">End date <span class="field-required">(Required)</span></span>
</label>

<div class="input-group mb-3">
<input id="date--end" type="text" required class="form-control" placeholder="YYYY-MM-DD" aria-describedby="button-addon2">
<button class="btn btn-outline-primary" type="button" id="button-addon2">
<div class="visually-hidden">Open date picker</div>
<i class="far fa-calendar-alt"></i>
</button>
</div>
</div>
</div>
</div>
</fieldset>

<div class="row">
Expand Down
11 changes: 1 addition & 10 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,7 @@


<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms A</a>
</li>






<li class="nav-item">
<a class="nav-link " href="/bootstrap-theme/formsB/">Forms B</a>
<a class="nav-link " href="/bootstrap-theme/formsA/">Forms</a>
</li>

<li class="nav-item">
Expand Down
6 changes: 1 addition & 5 deletions src/docs/_data/navigation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,8 @@
"url": "/"
},
{
"text": "Forms A",
"text": "Forms",
"url": "/formsA/"
},
{
"text": "Forms B",
"url": "/formsB/"
}
]
}
Loading

0 comments on commit 6a9bd64

Please sign in to comment.