formna/formna

Formna is a package which vanilla js developers can implement realtime form validation without much effort

Formna

Quickly validate forms on your website

Formna is a fast, small, and easy to use JavaScript library. It makes the input and form validation super easy as validation logic can be changed according to users requirements.

Install

npm install formna

Usage

* To Validate a Single Input

  import { validateInput } from "formna";

  const inputId = "name"; // id of the input field
  const errorId = "nameError"; // id of the error field relevant to the input
  const initialValue = ""; // initial value
  const errorMessage = "Enter a valid name"; // error message to be show
  const errorClassName = "error"; // class related to changes to be shown in the input element when an error occurs
  const validator = (inputVal) => inputVal.trim().length > 0; // validation logic

  const {
    value: nameInputValue,
    isValid: isNameValid,
    focus: focusName,
    hasError: nameHasError,
    reset: resetName
  } = validateInput(inputId, errorId, initialValue, errorMessage, errorClassName, validator)

• To Validate a Complete Form.

  import { validateForm } from "formna";

  const className = "form";
  const fileldDetails = [
    {
      id: "username", //id of the input field
      errorId: "usernameError", //id of the error field of the respective input
      initialValue: "", // initial value of the input
      errorMessage: "Enter a valid email", // error message to be shown
      errorClassName: "error", // class related to changes need to be seen in the input element
      validator: (inputVal) => inputVal.includes("@"), // validation logic
    },
    {
      id: "password",
      errorId: "passwordError",
      initialValue: "",
      errorMessage: "Enter a valid password",
      errorClassName: "error",
      validator: (inputVal) => inputVal.toString().trim().length > 6,
    },
  ];
  const postEndPoint = ""; // this is completely optional. you can see the same results without passing the third parameter.
  function formCallBack (data){ // This is also an optional parameter
    console.log(data)
  }
  validateForm(className, fileldDetails, postEndPoint, formCallBack);

Conclucsion

Using Formna you can implement real time form validation with side effects in your vanilla.js project.

formna's Issues

Interesting, a roadmap?

I think you are trying to put nice work on the world. Seen AuthBee too.

What I liked from the Readme is that seems very easy to put your own strategies on the validator.

This said, I think something like an integration with rxjs to subscribe to the validation results or to the dom events could make it even more useful.

Have thought on a roadmap?