Input

An input field for typing some text inside.

Input control

Related sample:  Inputs - DHTMLX Form

Related sample:  All dhxForm inputs - DHTMLX Form

Adding Input

You can easily add an Input control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "input",
            label: "Name",
            icon: "dxi dxi-magnify",
            placeholder: "John Doe"           
        } 
    ]
});

Attributes

You can provide the following attributes in the configuration object of an input:

  • type - (string) the type of a control, set it to "input"
  • id - (string) the id of a control, auto-generated if not set
  • validation - (object|function) the rule of input validation. Can be set in two ways:
    • as an object with validation rules listed below:
      • "" - empty
      • "email" - validEmail
      • "integer" - validInteger
      • "numeric" - validNumeric
      • "alphanumeric" - validAplhaNumeric
      • "IPv4" - validIPv4
    • as a function that defines a custom validation rule. It takes as a parameter the value typed in the input and returns true, if the entered value is valid.
  • value - (string) the initial value of the input
  • icon - (string) the name of an icon from the used icon font
  • placeholder - (string) a tip for the input
  • hidden - (boolean) makes an input hidden
  • autocomplete - (boolean) enables/disables the autocomplete functionality of the input
  • inputType - (string) sets the type of an input, use the "password" value to specify a field for entering a password

  • parent - (string) the id of the parent control
  • width - (string) the width of a control
  • height - (string) the height of a control
  • css - (string) adds style classes to a control
  • disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
  • label - (string) specifies a label for a control
  • labelWidth - (string) sets the width of the label of a control
  • hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
  • labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
  • name - (string) the name of a control
  • required - (boolean) defines whether a control is required
  • help - (string) adds a help message to a control
  • preMessage - (string) a message that contains instructions for interacting with the control
  • successMessage - (string) a message that appears in case of successful validation of the control value
  • errorMessage - (string) a message that appears in case of error during validation of the control value
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

Working with Input

You can manipulate a Input control by using methods of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("input_id").getValue();

List of the control methods:

  • clear() - clears a value of an Input control
  • clearValidate() - clears validation of an Input control
  • getValue(): string - returns the current string value of an Input control
  • setValue(value: string) - sets the value as a string for an Input control
  • setConfig(config: object) - sets a new configuration for an Input control
  • validate(): boolean - validates an Input control. Returns the result of validation: true, if a control is valid, otherwise - false

Setting configuration of Input control

It is possible to update the configuration of an Input control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

form.getItem("input_id").setConfig({
    label: "Name",
    labelInline: true,
    icon: "dxi dxi-magnify",
    labelWidth: "120px",
    required: true,
    placeholder: "John Doe",
});

The setConfig() method of a control doesn't allow updating its id, type and name properties.

Back to top