GithubHelp home page GithubHelp logo

thedhanawada / livevalidatejs Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 82 KB

LiveValidateJS is a lightweight JavaScript library that provides real-time form validation and input checking for HTML forms. With LiveValidateJS, you can easily create custom validation rules for each input field and receive instant feedback on the input's validity as the user types

Home Page: https://livevalidate.js.org/

License: MIT License

JavaScript 41.23% HTML 42.06% CSS 16.71%
form input javascript validation

livevalidatejs's Introduction

livevalidatejs's People

Contributors

thedhanawada avatar

Stargazers

 avatar

Watchers

 avatar  avatar

livevalidatejs's Issues

Unified Error Display

The purpose of this enhancement is to ensure consistency in the way the library handles and displays error messages. In the current implementation, we defined a function named handleErrorMessage which creates an error message and appends it to the designated error element. However, not all parts of the code are utilizing this function to display error messages, leading to inconsistency and potential code duplication.

Where Changes Could Be Made

There are two primary places where changes can be made: the addGroupValidation and validateAsync functions.

Here is a part of the addGroupValidation function:

if (isValid) {
  groupErrorElement.innerHTML = '';
} else {
  groupErrorElement.innerHTML = errorMessage;
}

And here is a part of the validateAsync function:

validationFunction(input.value.trim(), (errorMessage) => {
  if (errorMessage) {
    reject(errorMessage);
  } else {
    resolve();
  }
});

In both these code snippets, we're directly assigning the errorMessage to the innerHTML of the respective error elements.

Direction of Solution

Instead of directly manipulating the innerHTML, you can utilize the handleErrorMessage function. This function is designed to create a new error message, properly formatted and appended to the given error element.

The challenge here is to replace the direct innerHTML assignments in both functions with appropriate calls to handleErrorMessage. You'll need to consider the arguments that handleErrorMessage requires (an error element and an error message), and ensure these are correctly provided from both addGroupValidation and validateAsync functions.

By doing this, you'll be ensuring that all error messages across the library are handled consistently and displayed in a uniform manner, making your code more maintainable and user-friendly. Remember to thoroughly test the after making these changes to ensure everything still works as expected.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.