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 Jul 2, 2021
1 parent 78c21d3 commit afa7150
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 42 deletions.
14 changes: 11 additions & 3 deletions FormValidator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ FormValidator.prototype.showSummary = function() {
}
,
FormValidator.prototype.getSummaryHtml = function() {
var t = '<h3 class="h6 errorSummary-heading">There\'s a problem</h6>';
var t = '<h2 class="h5 errorSummary-heading">There\'s a problem</h2>';
t += "<ul>";
for (var e = 0, o = this.errors.length; e < o; e++) {
var i = this.errors[e];
Expand Down Expand Up @@ -84,14 +84,14 @@ 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"> ' + 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(),
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"))
}
,
Expand Down Expand Up @@ -154,3 +154,11 @@ validator.addValidator("password", [
message: "Your password must contain at least 8 characters",
},
]);
validator.addValidator('personal-details', [
{
method: function (field) {
return field.checked === true;
},
message: "You must waive your rights.",
}
])
77 changes: 39 additions & 38 deletions form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,87 +28,72 @@
></script>
<script defer src="FormValidator.js"></script>
<title>Exemplar Form</title>
<style>
.field-label {
display: block;
margin-bottom: 5px;
}

.field-hint {
font-style: italic;
font-size: 12px;
margin-bottom: 5px;
}

.field-error {
display: block;
}
</style>
</head>
<body>
<main class="container">
<h1>Exemplar Form</h1>
<div class="row">
<div class="col-md-6">
<h2>Form</h2>
<form id="registration" novalidate>
<div class="alert alert-info">
All fields are required, unless marked optional
</div>

<!-- <div tabindex="-1" role="group" id="errorSummary" class="alert alert-danger errorSummary" aria-labelledby="errorSummary-heading">
<h3 class="h6" id="errorSummary-heading">There's a problem</h3>
<ul>
<li><a href="#email">Enter your email address</a></li>
<li><a href="#password">Enter your password</a></li>
</ul>
</div> -->
<form id="registration" novalidate class="needs-validation">

<div tabindex="-1" role="group" id="errorSummary" class="alert alert-danger errorSummary hidden" >
<div tabindex="-1" role="group" id="errorSummary" class="alert alert-danger errorSummary hidden"></div>

<div class="help-block">
Enter your name to help complete this form
</div>

<fieldset>
<legend>Your details</legend>

<div class="form-group field">
<label for="name">Name</label>
<label for="name">
<span class="field-label">Name <span class="field-required">(Required)</span></span>
<span class="field-hint">Sort it out</span>
</label>
<input
class="form-control"
type="text"
name=""
id="name"
aria-required="true"
autocomplete="given-name"
required
/>
</div>

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

<div class="form-group field">
<label for="email">
<span class="field-label">Password</span>
<span class="field-hint">A valid email address</span>
</label>
<input
class="form-control"
type="password"
name=""
id="password"
autocomplete="current-password"
aria-required="true"
/>
</div>
</fieldset>

<div class="form-group field">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="personal-details" required>
<label class="custom-control-label" for="personal-details">I hereby agree to give away all my personal details, in perpetuity.</label>
</div>
</div>


<div class="controls">
<button type="submit" class="btn btn-primary">Login</button>
Expand All @@ -130,4 +115,20 @@ <h2>Guidelines</h2>
</div>
</main>
</body>
<script>
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)
})
</script>
</html>
5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,13 +530,16 @@ <h2>Forms</h2>


<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
<label for="example-textarea"></label>
<textarea id="example-textarea" class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<hr>

<h3>Horizontal form (Deprecated)</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
Expand Down

0 comments on commit afa7150

Please sign in to comment.