With the coming update of the DHTMLX library, we’re going to introduce a new component, which will be also available as a separate download. This component was probably missing in our library by accident, but now it’s time to fix it! This component is dhtmlxForm.
By offering dhtmlxForm to our users, we plan to solve the following tasks:
- Make form building and handling easy and convenient to those who are already working with DHTMLX.
- Simplify data loading into the form, and provide an easy way to save data on the server.
- Provide convenient ways to do form validation.
- Match the form interface to the DHTMLX skin design.
dhtmlxForm provides the following ways of building the form:
- Generate a form based on a JSON object.
- Generate a form based on external XML.
- Generate a form based on HTML lists.
- It’s also possible to attach the handler to a ready HTML form to apply dhtmlxForm validation, completion, and database binding capabilities.
As with other DHTMLX objects, dhtmlxForm provides a flexible script API to manage elements on the fly, process events, and validate data. To load data into the form and save it back to the server, you can use either dhtmlxConnector or your own server scripts.
A form built with the dhtmlxForm component supports all the usual types of elements. The use of DHTMLX controls such as Grid, Tree, or Combo within dhtmlxForm – as well as the creation of custom controls for dhtmlxForm – is coming soon in the official release. Also, when dependencies are used, dhtmlxForm manages the activity of form elements (e.g. – fields(s) will be active if a certain checkbox is checked or a certain radio button is selected).
Those who are interested may download and try dhtmlxForm before the official release. Your feedback is much appreciated, as it will help us to make the component really useful and easy to use. Apart from the component itself, the package also includes documentation and examples.
Please leave your comments here or go the Forum to discuss dhtmlxForm.
Posted by Mike Bremberg
Comments
Hello,
dhtmlxForm is great.
I’ve noticed that fieldset html tag support is missing. I use often fieldset and legends tags
when I create forms. Is there any plan to support fieldset ?
Thanks for any answer :)
JC, yes, we’ll try to add fieldset html tag suppor in the final release of dhtmlxForm. Thanks for your feedback.
Hi,
It would be nice if the Validation API could support to add a custom validation message after the element, similar to what is done in http://livevalidation.com/ out of the box :)
Regards,
Validation API allows to definy any custom reaction by using onValidateError event, so something similar can be added without changes in js files of dhtlmxform.
True, but AFAYK, it would have to be made a custom validation for each different validation type, as per example 04_validate/05_custom_message.html I was suggesting something like:
formData = [
{type:”input”, name:”field_a”, label:”User name”, validate:”NotEmpty”, invalidMessage: “Field can’t be empty”},
{type:”input”, name:”field_b”, label:”Email”, validate:”ValidEmail”, invalidMessage: “Field ain’t a valid Email”}
];
probably it would make more sense to be an sub-option in validate :)
anyway, it would just be nice ;)
btw, this new component is already quite useful, thx :D
We will check how such functionality can be added to the existing one (beta version was released to collect such recommendations :), so thank you for your suggestion :)
Ivan,
I, too, would greatly like the functionality mentioned here. Having an invalidMessage parameter (and perhaps even a validMessage parameter) would be very useful!
Hi,
This is very interesting.
How ever i culdn’t manage to do a lot of things :
1/ equivalent
2/when we apply on a button element a “validate” command :
{type: “button”, name: “button_submit”, value: “Valider”, command: “validate”}
the attachEvent(“onButtonClick”) is never called
Also i couldn’t manage to call a custom function :
{type: “button”, name: “button_submit”, value: “Valider”, command: “customCommand”}
[…]
function customCommand(){
alert (“Hi There!”);
}
bu then the onButtonClick is fired
3/when is try to submit the form in “get” :
this.send(“login.php”,”post”,function(xml){
alert (“Saved”);
});
I can see in the web server logs that the form elements are not sent as arguments
In addition to that the page form is “disabled” and no action is then possible. The alert “saved” doesn’t popup
Wen we replace “get” by “post” the page doesn’t freeze and the alerts shows up (but i didn’t test if the form args args are submitted)
4/css problems with the dhc_dark and dhx_blue templates prevent button images from displaying.
Good work. Can’t wait for the next release …
Nassim,
Thank you for the feedback.
1. Could you please clarify what you mean by “equivalent”?
2. For the button, custom command is not a function, but a parameter. It means that in any case onButtonClick will be called, and it will use the value of parameter command (in your case it will be customCommand)
3. We’ll check what can cause this problem.
4. We’ll be fixed in the official release.
Hi !
1- By equivalent i mean how to you configure dhtmlxform for ?
In the documentation i only found
* checkbox;
* radio for radio button;
* input for text input field and textarea;
* select for dropdown lists;
* label for sector titles;
* file for file upload control;
* button
* hidden
2- Thanks for the explanation. How ever still is it normal that onButtonClick is not called when the command is “validate” for the button definition ?
3- I also checked with post and no data is submitted.
Here is my code :
[…]
Sorry for the last post. All html tags were stripped by the validation process …
For 1- I meant how do you configure input type=”password” name=”password” value=””
Thx again
Nassim,
1. Input type “password” is currently missing in dhtmlxForm, but it will be added in the official release.
2. “is it normal that onButtonClick is not called when the command is “validate” for the button definition ?”
Yes, onButtonClick is not called for the standard commands. Please check the docs:
http://docs.dhtmlx.com/doku.php?id=dhtmlxform:event_onbuttonclick
3. We’ll investigate your code.
How can i integrated dhtmlxform with some Web editor such as FCKeditor,TinyMCE…
Thanks.
Could you please explain how you imagine such integration?
I want to integrate Textarea field with TinyMCE or FCKeditor in dhtmlxform when i load data from a table in database. But i don’t know how to do it .
Thanks.
Sample related to this question has been sent to your email address.
I am also interested in integrating an FCKEditor element into DHTMLXForm.
We’ve sent you the sample.
Hellow :)
Can you send me this sample ?
Thanks, JC :)
Hi!
Im also interested in TinyMCE Integration! Please send me the example.
I am also interested in integrating an FCKEditor element into DHTMLXForm. can you send me the samples?
I also would very much need this integration. Could you please send me a sample too? Thanks in advance
I am interested in integrating FCKEditor with DHTMLX. Would you please make the sample available either as a download link or sent to the email address provided. Thnx
[…] the original here: dhtmlxForm. Filling the Gap. If you enjoyed this article please consider sharing […]
Is it possible to call form validation on individual form elements when they are changed? The only function I can see exposed now is myform.validate() which fires all validation. I would like to do something like
myform.attachEvent(“onChange”, function (id, value){
myform.validate(id);
});
Also, it would be nice to be able to apply these event handlers to form elements in pre-existing html forms, not only created elements.
The possibility to call form validation on individual form elements will be available in the final version of dhtmlxForm (will be released in May or June).
How close are we? I’m starting a new project using dhtmlxForm (beta).
If everything goes well, we’ll release a new version of dhtmlxSuite with dhtmlxForm component in the end of the next week.
Great! Will the idea of invalidMessage make it into dhtmlxForm for this release?
Will dhtmlxForm be a supported component of dhtmlxConnector?
dhtmlxForm package already includes the connector, so yes, it will be supported in the final release as well.
oh…. very good , but it’s big, will load more slowly
It takes about 10kb in gzipped state – must not be a problem even for a slow connection.
Is there any future plans to integrate Excell into forms? We have several custom formatters for things like traffic (Gb/s etc) and it would be nice to be able to use these. As would being able to use things like calendarA etc.
Also I notice that Firefox (both Windows and Unix versions) don’t allow double mouse click in an input item to select all the data. Probably a firefox thing, just wondering if anyone has a work around?
Thanks for reporting this problem. We’ll add the fix to the final release.
Nickie, we might add this functionality in the future, but for now we don’t have such plans.
When trying to fire validate on an individual element, I found while debugging that the name returned was always the config_reset in the name var regardless of which button was activated.
ConfigureForm.attachEvent(“onButtonClick”, function(name,command){
if(name==”config_submit”){
ConfigureForm.validate();
}
});
Any suggestions?
oops, post dropped the xml…
item type=”button” name=”config_submit” value=”Submit”
item type=”button” name=”config_reset” value=”Reset Form”
Nickie, a working demo with updated dhtmlxform.js has been sent to your email address.
How can I collect all the values from a form?
The forEachItem() collector function does not pass the “name” as it is documented, but a “technical” id instead.
And the getItemValue()-function does not accept this id.
Some API functions work with the id, some with the name.
But anyway, dhtmlxForms is great!
Pit,
Technical id is generated automatically if name is not specified (it performs the role of the name, i.e. you can apply to it the same way).
getItemValue exists only for input-element
Everything works good on our side. Maybe you are trying to call getItemValue not for input?
Just found a major flaw in the beta dhtmlxForm validation routine.
If I have a hierarchial form, such as:
var formData = [
{type: “radio”, name: “customer”, value: “returning”, label: “Returning Customer”, checked: true, list:[
{type: “input”, name: “username”, label: “User Name”, validate: “NotEmpty”},
{type: “input”, name: “password”, label: “Password”}
]},
{type: “radio”, name: “customer”, value: “new”, label: “New Customer”, list:[
{type: “input”, name: “username”, label: “User Name”, validate: “NotEmpty”},
{type: “input”, name: “password”, label: “Password”, validate: “NotEmpty”},
{type: “input”, name: “confirmpassword”, label: “Confirm Password”, validate: “NotEmpty”},
{type: “input”, name: “email”, label: “Email Address”, validate: “NotEmpty”},
{type: “input”, name: “confirmemail”, label: “Confirm Email Address”, validate: “NotEmpty”},
{type: “input”, name: “city”, label: “City”, validate: “NotEmpty”},
{type: “input”, name: “state”, label: “State”, validate: “NotEmpty”}
]}
];
and I have the first radio button selected and the first two fields filled out, this form will fail validation since the disabled fields are empty.
Thank you for reporting this issue. It will be fixed in the final version (hopefully it will be released in the end of this week).
How is the final version release coming?
The update has been released today.
In real live, web base application try to do like desktop application, but it’s not easy. So, when I try to re-write my application, first I looking for control/component that do like desktop application.
So most wanted control/component:
1. Edit just for Currency or Numeric
2. Date Edit, just one component no need to add more script
3. Look Up Field link with Windows
It would be great if you can add this component or control
it’s also possible to attach the handler to a ready HTML form to apply dhtmlxForm validation, completion, and database binding capabilities.
Has any one been able to use this feature of dhtmlx form
Please help me out how to go about it
It’s pros and cons.
Thanks All
Yep, it’s possible. Just init dhtmlxForm by using existing form as target container. Please check the samples:
samples4_validate1_simple.html
samples5_data1_load.html
Great work, but is it possible to add extra form elements with javascript during run time ?
also I find it annoying not to be able to add normal HTML tags…
VCurrent version doesn’t support this. But you can add all necessary controls initialy and hide those you do not need. In other words you can show/hide elements when necessary.
Tags
Archives