Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated renderer to Bootstrap 4 #489

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated renderer to Bootstrap 4 #489

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 28 additions & 24 deletions doc/article/en-US/validation-basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ To build more sophisticated error UIs you might need a list of errors specific t
<source-code lang="HTML">
<form>
<div class="form-group" validation-errors.bind="firstNameErrors"
class.bind="firstNameErrors.length ? 'has-error' : ''">
class.bind="firstNameErrors.length ? 'is-invalid' : ''">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName"
placeholder="First Name"
Expand All @@ -479,7 +479,7 @@ To build more sophisticated error UIs you might need a list of errors specific t
</div>

<div class="form-group" validation-errors.bind="lastNameErrors"
class.bind="lastNameErrors.length ? 'has-error' : ''">
class.bind="lastNameErrors.length ? 'is-invalid' : ''">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName"
placeholder="Last Name"
Expand Down Expand Up @@ -539,8 +539,8 @@ Custom renderers implement a one-method interface: `render(instruction: RenderIn
formGroup.classList.add('has-error');

// add help-block
const message = document.createElement('span');
message.className = 'help-block validation-message';
const message = document.createElement("div");
message.className = "invalid-feedback";
message.textContent = result.message;
message.id = `validation-message-${result.id}`;
formGroup.appendChild(message);
Expand All @@ -557,13 +557,15 @@ Custom renderers implement a one-method interface: `render(instruction: RenderIn
}

// remove help-block
const message = formGroup.querySelector(`#validation-message-${result.id}`);
const message = formGroup.querySelector(
`#validation-message-${result.id}`
);
if (message) {
formGroup.removeChild(message);

// remove the has-error class from the enclosing form-group div
if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
formGroup.classList.remove('has-error');
// remove the is-invalid class from the enclosing form-group div
if (formGroup.querySelectorAll(".invalid-feedback").length === 0) {
element.classList.remove("is-invalid");
}
}
}
Expand All @@ -577,7 +579,7 @@ To use a custom renderer you'll need to instantiate it and pass it to your contr
> Warning
> The renderer example uses `Element.closest`. You'll need to [polyfill](https://github.com/jonathantneal/closest) this method in Internet Explorer.

Here's another renderer for bootstrap forms that demonstrates "success styling". When a property transitions from indeterminate validity to valid or from invalid to valid, the form control will highlight in green. When a property transitions from indeterminate validity to invalid or from valid to invalid, the form control will highlight in red, just like in the previous bootstrap form renderer example.
Here's another renderer for bootstrap 4 forms that demonstrates "success styling". When a property transitions from indeterminate validity to valid or from invalid to valid, the form control will highlight in green. When a property transitions from indeterminate validity to invalid or from valid to invalid, the form control will highlight in red, just like in the previous bootstrap form renderer example.

<code-listing heading="bootstrap-form-renderer.ts">
<source-code lang="TypeScript">
Expand All @@ -597,48 +599,50 @@ Here's another renderer for bootstrap forms that demonstrates "success styling".
}

add(element: Element, result: ValidateResult) {
const formGroup = element.closest('.form-group');
const formGroup = element.closest(".form-group");
if (!formGroup) {
return;
}

if (result.valid) {
if (!formGroup.classList.contains('has-error')) {
formGroup.classList.add('has-success');
if (!element.classList.contains("is-invalid")) {
element.classList.add("is-valid");
}
} else {
// add the has-error class to the enclosing form-group div
formGroup.classList.remove('has-success');
formGroup.classList.add('has-error');
// add the is-invalid class to the enclosing form-group div
element.classList.remove("is-valid");
element.classList.add("is-invalid");

// add help-block
const message = document.createElement('span');
message.className = 'help-block validation-message';
const message = document.createElement("div");
message.className = "invalid-feedback";
message.textContent = result.message;
message.id = `validation-message-${result.id}`;
formGroup.appendChild(message);
}
}

remove(element: Element, result: ValidateResult) {
const formGroup = element.closest('.form-group');
const formGroup = element.closest(".form-group");
if (!formGroup) {
return;
}

if (result.valid) {
if (formGroup.classList.contains('has-success')) {
formGroup.classList.remove('has-success');
if (element.classList.contains("is-valid")) {
element.classList.remove("is-valid");
}
} else {
// remove help-block
const message = formGroup.querySelector(`#validation-message-${result.id}`);
const message = formGroup.querySelector(
`#validation-message-${result.id}`
);
if (message) {
formGroup.removeChild(message);

// remove the has-error class from the enclosing form-group div
if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
formGroup.classList.remove('has-error');
// remove the is-invalid class from the enclosing form-group div
if (formGroup.querySelectorAll(".invalid-feedback").length === 0) {
element.classList.remove("is-invalid");
}
}
}
Expand Down