v2.0.3

We are excited to announce vbox version 2.0.3, bringing a series of improvements and fixes that make the data validation process even more robust and efficient.

In this release, we focus on: Schema Validation & Custom Messages Support

New Schema System

• Added comprehensive schema validation system with vboxSchema
• Support for complex form validations
• Easy-to-use schema builder pattern
• Extended validation rules for all field types

Custom Messages

• Added support for personalized error messages

Implementation Details

Schema Usage Example

"use client"
import React, { useState } from "react";
import { vboxSchema, validator } from "validation-box";
 
const userSchema = new vboxSchema({
  username: validator.username({
    bannedWords: ["admin", "root"],
    messages: { bannedWords: "You are using prohibited words"},
  }),
  password: validator.password({
    min: 8,
    messages: { invalidFormat: "Invalid Password" },
  }),
});
 
const UserRegistrationForm: React.FC = () => {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });
  const [errors, setErrors] = useState<Record<string, string[]>>({});
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const result = userSchema.validate(formData);
    if (result.success) {
      console.log("Form data is valid:", result.data);
      setErrors({});
    } else {
      console.log("Form data is invalid:", result.errors);
      setErrors(result.errors || {});
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div>
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
            placeholder="Enter username"
          />
        {errors.username && <p>{errors.username}</p>}
      </div>
      <div>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            placeholder="Enter password"
          />
        {errors.password && <p>{errors.password}</p>}
      </div>
      <button type="submit">Login</button>
    </form>
  );
};
 
export default UserRegistrationForm;

📚 Documentation Updates

• Added new section for schema validation
• Updated examples with custom messages

Next Steps

• Enhance schema validation with more features
• Improve documentation with more examples

This release marks a significant milestone with the introduction of the schema validation system and comprehensive custom message support, making validation-box more flexible and powerful for complex form validations.

What's Changed

• refactor(lib): specific options by @euotiniel in #1
• testing new individual options by @euotiniel in #2
• fix(doc): update the v-box package version by @euotiniel in #3
• feat: add schema by @euotiniel in #4
• update 1.0.11 by @euotiniel in #5
• refactor(schema):structure improvement + fix: correction of specific messages by @euotiniel in #6
• hello v2 by @euotiniel in #7

New Contributors

• @euotiniel made their first contribution in #1

Full Changelog: v1.0.1...v2.0.3