SFormValidateFeature

Platform  

js

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• Support for input value formatting using the __format function from '@coffeekraken/sugar/string' package

• Validate your field and display an error message if needed

• Prevent your form to be submited when an error occurs

• Built-in validators like email, min, max, pattern, etc...

• Support custom validators through the @coffeekraken/s-validator package

• Custom inline error message support

• And more...

  Import

  Install

  Events

1. error

   Dispatched when a validation error occurs

2. valid

   Dispatched when a validation pass correctly

  Interface

1. min

   String|Array|Object|Number

   Validate string, array, object and number using the "min" rule

2. max

   String|Array|Object|Number

   Validate string, array, object and number using the "max" rule

3. email

   String

   Validate an email string

4. required

   Boolean

   Make sure a value has been provided

5. isoDate

   String

   Validate an iso date string

6. isoTime

   String

   Validate an iso time string

7. isoDateTime

   String

   Validate an iso date string

8. integer

   number

   Validate an integer

9. number

   number

   Validate an number

10. negative

    number

    Validate an negative number

11. positive

    number

    Validate an positive number

12. pattern

    String

    Validate a string using a regex pattern

13. alphanum

    String

    Validate an alphanum string

14. creditCard

    String

    Validate a credit card string

15. color

    String

    Validate a color string

16. hex

    String

    Validate a hexadecimal string

17. password

    String

    Validate a password string

18. minMessage

    String

    The message to display when the validator "min" fails

19. maxMessage

    String

    The message to display when the validator "max" fails

20. emailMessage

    String

    The message to display when the validator "email" fails

21. requiredMessage

    String

    The message to display when the validator "required" fails

22. isoDateMessage

    String

    The message to display when the validator "isoDate" fails

23. isoTimeMessage

    String

    The message to display when the validator "isoTime" fails

24. isoDateTimeMessage

    String

    The message to display when the validator "isoDateTime" fails

25. integerMessage

    String

    The message to display when the validator "integer" fails

26. numberMessage

    String

    The message to display when the validator "number" fails

27. negativeMessage

    String

    The message to display when the validator "negative" fails

28. positiveMessage

    String

    The message to display when the validator "positive" fails

29. patternMessage

    String

    The message to display when the validator "pattern" fails

30. alphanumMessage

    String

    The message to display when the validator "alphanum" fails

31. creditCardMessage

    String

    The message to display when the validator "creditCard" fails

32. colorMessage

    String

    The message to display when the validator "color" fails

33. hexMessage

    String

    The message to display when the validator "hex" fails

34. passwordMessage

    String

    The message to display when the validator "password" fails

35. type

    text

    String

    Specify the validation type. Usually automatically detected depending on the field type

36. on

    ["keyup","change","submit","enter","reset"]

    • keyup
    • change
    • submit
    • enter
    • reset

    Array<String>

    Specify when to trigger a validation. Can be "change","submit","enter" and/or "reset"

37. format

    • isoDate
    • isoDateTime
    • isoTime
    • integer
    • number
    • alphanum
    • hex
    • hexa
    • creditCard

    String

    Specify if you want your value to be formatted a certain way. You can specify every "import { __format } from @coffeekraken/sugar/string" supported formats

38. errorClass

    s-form-validate--error s-color--error

    String

    Specify the class to apply when theres an error

39. validClass

    s-form-validate--valid s-color--success

    String

    Specify the class to apply on your s-form-validate element when validation is passed successfully

40. handlers

    {}

    Object

    Specify some custom handlers by validator that will be executed in addition to the default validate behavior. The handler will take as argument an object containing the "result" SValidator result, the "$feature" that represent the s-validate node, the "$form" node if exists, the "$node" attached node if using the "nodes" property, the "$field" that represent the input field handled and the "props" that represent the feature properties

41. nodes

    String

    Specify a css selector that target some HTMLElements used for the validation. Every HTMLElement has to specify 1 validator by using element attributes (same as on the feature itself). Classes are applied on each "node" to specify if the validator is valid or not

42. language

    en

    String

    Specify the language you want to use for messages

43. displayError

    true

    Boolean

    Specify if you want to display the error messages or not

44. errorContainerAttr

    s-form-validate-error

    String

    Specify the attribute to search for the error container. If not found, a default container will be created and inserted after your s-form-validate element