Styleguide Navigation

Form Condition

  • Status unkown unkown
  • 2017-01-18 Added [jch]
  • 2017-01-31 Update naming convention: replace class names start with ew-* to ew_* [gb]

Usage

This simple JavaScript component checks a condition with form-values and sets a class to the current node if the condition is true.

Syntax: 
(ClassName1): (condition1)[; (ClassName2): (condition2)]

At the moment there are only simple conditions supported:

Condition: 
(formName.fieldName) (Comparison or Logical Operator) ('fieldValue')
is-valid: myForm.myField == '1'
Conditin examples
  • myClassname: myForm.myField == '1'
  • myClassname: myForm.myField < '1'
  • myClassname: myForm.myField <= '1'
  • myClassname: myForm.my.Field > '1'
  • myClassname: myForm.myField[0] >= '1'
  • myClassname: myForm.my.Field[0] != '1'

Example (hide)

FormCondition: 
is-opened: myForm0.myField == '1'

Container 1

Condition myForm0.myField == '1' is true.

Container 2

Condition myForm0.myField == '2' is true.

FormCondition: 
is-opened: myForm1.my_Field[0] == '1'

Container 1

Condition myForm1.my_Field[0] == '1' is true.

Container 2

Condition myForm1.my_Field[0] == '2' is true.

FormCondition: 
is-opened: myForm3.my.Field == '1'

Container 1

Condition myForm3.my.Field == '1' is true.

Container 2

Condition myForm3.my.Field == '2' is true.

Example (validation on keydown)

FormCondition: 
is-valid: myForm2.inputField == '1'; has-error: myForm2.inputField != '1'; is-not-empty: myForm2.inputField != ''