1.0.1 • Published 1 year ago

form-validator-plugin v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

form-validator-plugin

A lightweight and flexible jQuery plugin for form validation with customizable rules and messages.

Features

  • Required field validation
  • Alphanumeric, full-width character, and numeric validation
  • Minimum, maximum, and range length validation
  • Custom regex pattern validation
  • Email, URL, phone number, and postal code format validation
  • Conditional validation and skipping fields
  • Custom validation rules
  • Customizable error messages and feedback display

Installation

Via npm

npm install form-validator-plugin

Manual Installation

Include jQuery and the formValidatorPlugin plugin in your HTML file:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="path/to/dist/form-validator-plugin.min.js"></script>
<link rel="stylesheet" href="path/to/dist/styles.min.css">

If you are using Bootstrap, include it as well:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/css/bootstrap.min.css">

Usage

Initialize the plugin on your form element:

$(document).ready(function() {
    $('#myForm').formValidatorPlugin({
        rules: {
            fieldName: {
                required: true,
                minLength: 5
            },
            anotherField: {
                email: true
            }
        },
        messages: {
            fieldName: {
                required: "This field is required",
                minLength: "This field must be at least {minLength} characters long"
            },
            anotherField: {
                email: "Please enter a valid email address"
            }
        },
        triggerButtonId: "submitBtn", // Only necessary if type="button"
        onValid: function() {
            alert("Form is valid!");
        },
        onInvalid: function() {
            alert("Form is invalid!");
        }
    });
});

Options

rules

An object defining the validation rules for each form field. Available rules:

  • required: Ensures the field is not empty.

    • Example:
      rules: {
    fieldName: { required: true }
}

  • bothRequired: Ensures both fields are not empty.

    • Example:
      rules: {
    fieldName: { bothRequired: "#anotherField" },
    anotherField: { bothRequired: "#fieldName" }
}

  • checkbox: Ensures a checkbox is checked.

    • Example:
      rules: {
    acceptTerms: { checkbox: true }
}

  • alphaNum: Ensures the field contains only alphanumeric characters.

    • Example:
      rules: {
    username: { alphaNum: true }
}

  • fullWidthChars: Ensures the field contains only full-width characters.

    • Example:
      rules: {
    japaneseText: { fullWidthChars: true }
}

  • noNumbers: Ensures the field contains no numeric characters.

    • Example:
      rules: {
    name: { noNumbers: true }
}

  • minLength: Ensures the field has at least the specified number of characters.

    • Example:
      rules: {
    password: { minLength: 8 }
}

  • maxLength: Ensures the field has no more than the specified number of characters.

    • Example:
      rules: {
    description: { maxLength: 100 }
}

  • rangeLength: Ensures the field length is within the specified range.

    • Example:
      rules: {
    username: { rangeLength: [5, 15] }
}

  • pattern: Ensures the field matches the specified regex pattern.

    • Example:
      rules: {
    zipCode: { pattern: "^[0-9]{3}-[0-9]{4}$" }
}

  • numeric: Ensures the field contains a numeric value.

    • Example:
      rules: {
    age: { numeric: true }
}

  • integer: Ensures the field contains an integer value.

    • Example:
      rules: {
    quantity: { integer: true }
}

  • min: Ensures the field value is at least the specified number.

    • Example:
      rules: {
    age: { min: 18 }
}

  • max: Ensures the field value is no more than the specified number.

    • Example:
      rules: {
    score: { max: 100 }
}

  • range: Ensures the field value is within the specified range.

    • Example:
      rules: {
    score: { range: [0, 100] }
}

  • email: Ensures the field contains a valid email address.

    • Example:
      rules: {
    email: { email: true }
}

  • url: Ensures the field contains a valid URL.

    • Example:
      rules: {
    website: { url: true }
}

  • phone: Ensures the field contains a valid phone number.

    • Example:
      rules: {
    phoneNumber: { phone: true }
}

  • postalCode: Ensures the field contains a valid postal code.

    • Example:
      rules: {
    postalCode: { postalCode: true }
}

  • date: Ensures the field contains a date in YYYY-MM-DD format.

    • Example:
      rules: {
    birthDate: { date: true }
}

  • dateRange: Ensures the date range is valid.

    • Example:
      rules: {
    startDate: { date: true, dateRange: ["#startDate", "#endDate"] },
    endDate: { date: true, dateRange: ["#startDate", "#endDate"] }
}

  • validOption: Ensures the field value is one of the specified valid options.

    • Example:
      rules: {
    country: { validOption: ["US", "CA", "MX"] }
}

messages

An object defining custom error messages for each validation rule.

customValidators

An object defining custom validation functions.

feedbackSelectors

An object defining custom selectors for feedback display elements.

triggerButtonId

The ID of the button that triggers the form validation. Defaults to "submitBtn". Only necessary for buttons with type="button". Not required for submit buttons.

conditionalSkips

Settings to skip field validation based on specific conditions. The following conditions are supported:

  • skipIfNotEmpty: Skips validation if the dependent field is not empty.
  • skipIfValue: Skips validation if the dependent field has a specific value.
  • skipIfChecked: Skips validation if the dependent field is checked.

Example

conditionalSkips: {
    fieldName: {
        skipIfNotEmpty: true,
        dependentId: "anotherField"
    },
    anotherField: {
        skipIfValue: "specificValue",
        dependentId: "someOtherField"
    },
    checkboxField: {
        skipIfChecked: true,
        dependentId: "yetAnotherField"
    }
}

onValid

A callback function executed when the form is valid.

onInvalid

A callback function executed when the form is invalid.

Example

<form id="myForm">
    <div class="form-group">
        <label for="fieldName">Field Name</label>
        <input type="text" id="fieldName" name="fieldName" class="form-control">
        <div class="invalid-feedback"></div>
    </div>
    <div class="form-group">
        <label for="anotherField">Another Field</label>
        <input type="email" id="anotherField" name="anotherField" class="form-control">
        <div class="invalid-feedback"></div>
    </div>
    <button type="button" id="submitBtn">Submit</button>
</form>
$(document).ready(function() {
    $('#myForm').formValidatorPlugin({
        rules: {
            fieldName: {
                required: true,
                minLength: 5
            },
            anotherField: {
                email: true
            }
        },
        messages: {
            fieldName: {
                required: "This field is required",
                minLength: "This field must be at least {minLength} characters long"
            },
            anotherField: {
                email: "Please enter a valid email address"
            }
        },
        triggerButtonId: "submitBtn", // Only necessary if type="button"
        onValid: function() {
            alert("Form is valid!");
        },
        onInvalid: function() {
            alert("Form is invalid!");
        }
    });
});

License

This project is licensed under the MIT License.

jquerypluginformvalidation
jquery
1.0.1

1 year ago

1.0.0

1 year ago