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

Jump to bottom

Fix Input Fields validation message #438

Draft
wants to merge 4 commits into
base: v2-dev
Choose a base branch
from
Draft

Fix Input Fields validation message #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d01ba2a
fix(forms): fix input field validation message not appearing
Jerit3787 Nov 29, 2023
2492cf2
fix(forms): fix error message floating with spacing
Jerit3787 Nov 29, 2023
db380cf
fix(forms): add comments to the validation function
Jerit3787 Nov 29, 2023
1940d63
fix(forms): fix missing selector for success message
Jerit3787 Nov 29, 2023
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
43 changes: 41 additions & 2 deletions sass/components/forms/_input-fields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,45 @@ textarea.materialize-textarea {
width: 100%;
font-size: $md_sys_typescale_body-large_size; //$input-font-size; // => 16 dp
height: 56px; // 56dp $input-height;

// Hide helper text on data message
&.valid ~ .supporting-text[data-success],
&:focus.valid ~ .supporting-text[data-success],
&.invalid ~ .supporting-text[data-error],
&:focus.invalid~.supporting-text[data-error] {
@extend %hidden-text;
}

// Valid Input Style
&.valid,
&:focus.valid {
@extend %valid-input-style;
}

// Custom Success Message
&.valid ~ .supporting-text:before,
&:focus.valid ~ .supporting-text:before {
@extend %custom-success-message;
}

&:focus.valid ~ label {
color: $input-success-color;
}

// Invalid Input Style
&.invalid,
&:focus.invalid {
@extend %invalid-input-style;
}

// Custom Error message
&.invalid ~ .supporting-text:before,
&:focus.invalid ~ .supporting-text:before {
@extend %custom-error-message;
}
&:focus.invalid ~ label {
color: $input-error-color;
}
}

/* Validation Sass Placeholders */
Expand All @@ -42,16 +81,16 @@ textarea.materialize-textarea {
user-select: none;
pointer-events: none;
}
/*

%custom-success-message {
content: attr(data-success);
color: $input-success-color;
}

%custom-error-message {
content: attr(data-error);
color: $input-error-color;
}
*/

.input-field {
position: relative;
Expand Down
49 changes: 49 additions & 0 deletions src/forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,41 @@
import { Utils } from "./utils";

export class Forms {
/**
* Checks if the label has validation and apply
* the correct class and styles
* @params textarea Textarea to be checked
*/
static validate_field(textarea: HTMLInputElement) {
// Checks if textarea is exist
if (!textarea) {
console.error('No textarea element found');
return;
}

let hasLength = textarea.getAttribute('data-length') !== null;
let lenAttr = parseInt(textarea.getAttribute('data-length'));
let len = textarea.value.length;

if (len === 0 && textarea.validity.badInput === false && !textarea.required ) {
if (textarea.classList.contains('validate')) {
textarea.classList.remove('valid');
textarea.classList.remove('invalid');
}
} else {

if (textarea.classList.contains('validate')) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be sufficient to check weather or not the text are has a "data-length" Attribute?
If it has, it indicates that the user wants the textarea to be validated.

Copy link
Author

@Jerit3787 Jerit3787 Dec 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that could work. I couldn't find anything referencing the validate attribute other than this part. As I stated, this is the code from previous version of it. Not sure if it could be impacting anything else so far.

Referencing here from v1.0.0:

M.validate_field = function(object) {
    let hasLength = object.attr('data-length') !== null;
    let lenAttr = parseInt(object.attr('data-length'));
    let len = object[0].value.length;

    if (len === 0 && object[0].validity.badInput === false && !object.is(':required')) {
      if (object.hasClass('validate')) {
        object.removeClass('valid');
        object.removeClass('invalid');
      }
    } else {
      if (object.hasClass('validate')) {
        // Check for character counter attributes
        if (
          (object.is(':valid') && hasLength && len <= lenAttr) ||
          (object.is(':valid') && !hasLength)
        ) {
          object.removeClass('invalid');
          object.addClass('valid');
        } else {
          object.removeClass('valid');
          object.addClass('invalid');
        }
      }
    }
  };

From the code above, this seems linked to the textbox that have character count. I might have to recheck the CSS behavior.

// Check for character counter attributes
if (((textarea.validity.valid) && hasLength && len <= lenAttr) || textarea.validity.valid && !hasLength) {
textarea.classList.remove('invalid');
textarea.classList.add('valid');
} else {
textarea.classList.remove('valid');
textarea.classList.add('invalid');
}
}
}
}

/**
* Resizes the given TextArea after updating the
Expand Down Expand Up @@ -81,6 +116,20 @@ export class Forms {
static Init(){
document.addEventListener("DOMContentLoaded", () => {

document.addEventListener('change', (e: KeyboardEvent) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we attach the validate Function to the input field directely?

Copy link
Author

@Jerit3787 Jerit3787 Dec 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah kinda, here I find kinda wierd checking for input element inside the function and outside of it. But, to be frankly speaking, the old jQuery code only checks for the length and applies the validate_field immediately.

Referencing here from v1.0.0:

$(document).on('change', input_selector, function() {
      if (this.value.length !== 0 || $(this).attr('placeholder') !== null) {
        $(this)
          .siblings('label')
          .addClass('active');
      }
      M.validate_field($(this));
    });

Since the textbox are now being handled by CSS, I think we can drop the length check. Again, I need to confirm the CSS behavior again.

const target = <HTMLInputElement>e.target;
if (target instanceof HTMLInputElement) {
if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
for (const child of target.parentNode.children) {
if (child.tagName == "label") {
child.classList.add("active");
}
}
}
Forms.validate_field(target);
}
})

document.addEventListener('keyup', (e: KeyboardEvent) => {
const target = <HTMLInputElement>e.target;
// Radio and Checkbox focus class
Expand Down
Loading