Work with Form

Getting values of controls

You can get current values/states of Form controls with the help of the getValue method. By default this method returns an object with IDs of controls and their values/states.

// default functionality
var state = form.getValue();//->{"name":"John Doe","email":"jd@mail.com", "agree":true}

It is also possible to get this information in the form of FormData. For this you need to pass the following parameter:

  • asFormData - (boolean) defines whether values of Form controls should be returned as Form Data
// returning form details as FormData
var state = form.getValue(true);

Related sample:  Get value - DHTMLX Form

Setting new values for controls

If you want to set new values or states for Form controls on the fly, there is the setValue at your disposal. The method takes as a parameter an object with new values/states of controls. This object should contain a set of key:value pairs where key is the id of the control and value is a new value/state of the control:

form.setValue({
    "input_id":"Jack London", 
    "slider_id":10
    // more id:value pairs
});

Related sample:  Set value - DHTMLX Form

Updating form configuration

It is possible to update the configuration of Form on the fly with the help of the setConfig method. You need to pass a new configration object as a parameter of the method:

form.setConfig({
    cellCss: "dhx_widget--bordered",
    gravity: false,
    rows: [
        {
            type: "input",
            label: "Name",
            icon: "dxi-magnify",
            placeholder: "John Doe"
        }
    ]
});

Related sample:  Set configuration - DHTMLX Form

Validating form

In order to validate a form, you should deal with two aspects: required fields and validation rules.

Required fields

You can easily specify that an input is obligatory to be treated by a user with the help of the required attribute.

{   
    type: "checkbox",
    label: "I agree",
    labelInline: true,
    name: "agree",
    required: true,
    id: "agree",
    value: "checkboxvalue"
}

While you've set required:true for a field, it gets an asterisk next to its label:

Required fields

Related sample:  Required - DHTMLX Form

Validation rules

To specify the way of validating a particular input/textarea, you can make use of predefined validation rules, they are:

  • "" - empty
  • "email" - validEmail
  • "integer" - validInteger
  • "numeric" - validNumeric
  • "alphanumeric" - validAplhaNumeric
  • "IPv4" - validIPv4

Set a string with the name of the necessary rule as a value of the validation attribute:

{
    type: "input",
    label: "Email",
    placeholder: "jd@mail.name",
    validation: "email"
}

There is also a possibility to specify a custom validation rule by setting it as a value of the validation attribute:

{
    type: "input",
    label: "Name",
    placeholder: "John Doe",
    validation: function(value) {
        return value && value.length > 4;
    }   
}

Related sample:  Validation - DHTMLX Form

Messages

While specifying validation rules for form fields, you can also provide a set of messages that will notify the end user, whether he/she is filling the form in correctly. There are three types of messages available:

  • 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

For example, a configuration object for an input with email may look as in:

{
    type: "input",
    label: "Email",
    placeholder: "jd@mail.name",
    errorMessage: "Invalid email",
    successMessage: "Valid email",
    validation: "email"
}

Related sample:  Validate - DHTMLX Form

Validation API

After a user has finished filling out the form according to the specified rules, it's high time to check, whether it is done correctly. To validate a form, make use of the validate method:

var result = form.validate();

The method should return true, if all the fields are filled as required, or false if there are fields that require attention.

Related sample:  Validate - DHTMLX Form

Sending form to server

To send a form to the server, make use of the send method. It takes two parameters:

  • url - (string) the URL of the server
  • method - (string) the request type, "POST" by default

and returns a promise object.

var send = form.send("myserver.com", "POST");

To control the process of a from sending, you can make use of the related events: beforeSend and afterSend:

// fires before sending a form to the server
form.events.on("BeforeSend", function(){
   // your logic here
});
 
// fires after sending a form to the server
form.events.on("AfterSend", function(){
   // your logic here
});

Clearing form

The API of dhtmlxForm provides you with flexible ways of clearing a form. There is the clear method that clears a form either fully or partially, depending on the passed parameter.

  • "value" - clears only form values
  • "validation" - clears form validation
  • without parameters - clears both form values and validation
// clears only form validation
form.clear("validation");
 
// clears only form values
form.clear("value");
 
// clears both form values and validation
form.clear();

Related sample:  Clear - DHTMLX Form

Back to top