Input

An input field for typing some text inside.

Input control

Related sample:  Form. All DhxForm Inputs

Related sample:  Form. Inputs

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"
  • inputType - (string) sets the type of an input, use the "password" value to specify a field for entering a password
  • name - (string) the name of a control
  • id - (string) the id of a control, auto-generated if not set
  • value - (string) the initial value of the input
  • 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.
  • width - (string) the width of a control
  • height - (string) the height of a control
  • maxlength - (string) the maximum number of characters allowed in the input
  • css - (string) adds style classes to a control
  • disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
  • required - (boolean) defines whether a control is required
  • readOnly - (boolean) defines whether an input is readonly
  • hidden - (boolean) makes an input hidden
  • icon - (string) the name of an icon from the used icon font
  • placeholder - (string) a tip for the input
  • autocomplete - (boolean) enables/disables the autocomplete functionality of the input
  • label - (string) specifies a label for a control
  • labelWidth - (string|number) 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
  • labelPosition - (string) defines the position of a label: "left"|"top"
  • helpMessage - (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
  • disable() - disables an Input control on a page
  • enable() - enables a disabled Input control
    Related sample:  Form. Disable Of Control
  • getValue(): string - returns the current string value of an Input control
  • hide() - hides an Input control
  • isDisabled(): boolean - checks whether an Input control is disabled
  • setValue(value: string) - sets the value as a string for an Input control
  • show() - shows an Input control on the page
  • validate(): boolean - validates an Input control. Returns the result of validation: true, if a control is valid, otherwise - false
Back to top