A Stimulus controller for rendering rails model validation errors inline on form inputs
npm install stimulus-inline-input-validations 
A Stimulus controller for validating form inputs and rendering their errors in a custom error element. Validations are
performed on input and blur events.
Looking for another awesome validations library to try? Check out Formulus
StimulusJS installation is required.
Add the package to your project:
``bash`
yarn add stimulus-inline-input-validations
Import and register InputValidator to your application
`javascript`
import {InputValidator} from "stimulus-inline-input-validations"
application.register("input-validator", InputValidator)
1. Add data-controller="input-validator" to your form or any parent element of elements you want to validate.
`html
...
`
2. Add an element with the data-input-validator-target="field" and data-field attribute that uniquely identifies the field.
`html
type="text"
data-input-validator-target="field"
data-field='fullName'
>
...
`
3. Add an errors element with the data-input-validator-target="errors" attribute and a data-field name that matches thedata-field
corrosponding input element. This is where any errors from the matching will be rendered.
` html
type="text"
data-input-validator-target="field"
data-field='fullName'>
data-field="fullName"
class="">Errors will be rendered here
4. Add, mix, and match validations attributes to the input field
html
type="text"
data-input-validator-target="field"
data-field='fullName'
data-validates-presence
data-validates-length="5,10"
data-validates-numericality
data-validates-email
>
data-field="fullName"
class="">
Standard Validation attributes
| Attribute | Description | Renders |
| -------- | ----------- | --------------- |
|
| Validates presence |
| | Validates length in format "min,max" | |
| data-validates-numericality | Ensures value is a Number | |
| data-validates-email | Ensures value is in Email format | |
| data-validates-strong-password | Ensures value is strong password | |
| data-validations="[{"presence": true}, {"email": true}, {"numericality": true}, {"length": {"min": 5, "max": 10}}]" | Handles multiple validations from a json-friendly-string| |
Multiple validations passed as a json-friendly string
You can also pass multiple validations as a json-friendly string with the
data-validations attribute.Example:
`html
type="text"
data-input-validator-target="field"
data-field='jsonBulkValidations'
data-validations='[{"presence": true}, {"email": true}, {"numericality": true}, {"length": {"min": 5, "max": 10}}]'
>
`Will render
html
Can't be blank
Too short. Must be 5 characters long
Must be a number
Invalid email format
`Usage in Rails: Leveraging existing model validations in Rails form helpers
1. Add a
method to application_helper.rbruby
module ApplicationHelper
def json_validations_for(model, field)
validations_hash = {} validators = model.class.validators_on(field)
validators.each do |validator|
validator_name = validator.class.name.demodulize.underscore.to_sym
if validator_name == :length_validator
options = validator.options.dup
validations_hash[:length] = { min: options[:minimum].present? ? options[:minimum] : 1,
max: options[:maximum].present? ? options[:maximum] : 1000 }
end
validations_hash[:presence] = true if validator_name == :presence_validator
validations_hash[:numericality] = true if validator_name == :numericality_validator
end
validations_hash[:strong_password] = true if field == :password
validations_hash[:email] = true if field == :email
validations = validations_hash.map do |key, value|
{ key.to_s => value }
end
validations.to_json.html_safe
end
end
`2. Use the
helper method in your Rails form helpers`erb
<%= f.text_field :email,
data: {
input_validator_target:"field",
field: :email,
validations: json_validations_for(@user, :email)
} %>
`Make sure you have a matching errors element with
and matching data-field=""
i18n
You can use the
attribute to specify a locale for error messages.`html
`Supported languages values:
| Value | Language |
| -------- | ----------- |
|
| English |
| es | Spanish |
| fr | French |
| pt-BR | Portugese (Brazil) |
| zh-CN | Chinese (Simplified) |
| zh-TW` | Chinese (Traditional) |