daffl/jquery.dform

A flexible JavaScript Object and JSON to HTML converter with a focus on forms

jquery.dform's Issues

Populate and serialize

Create or extend existing plugins to serialize and populate forms (including non standard custom types)

Download-link at http://daffl.github.com/jquery.dform/ broken

The first link at the get started page is broken.

JSON Schema integration (feature request)

Link to or embed a "JSON Schema". To be used for a unified source of information on the types of properties, and other qualifying meta data.

Adding CAPTCHA

Is there any scope of adding CAPTCHA in dform??

make dform working with JQuery Mobile

When using with JQuery mobile, dform generate DOM but it doesn't work.
Is there a problem with page events?
This is an example:
http://plnkr.co/edit/mB30y0?p=preview

add validate remote on pre subscribe

Hi,
when I try to add vtalidate remote option on pre/post subscribe it throws jquery validate type error
$.dform.subscribe('[pre]', function(options, type) { options.validate.remote = {url:"localhost" data:{val1:options.id, val2: function(){return $(options.id).val();} }} }
and I am creating form like
$("#saveDeviceForm").dform("url");

Checkbox and radio button labels should be clickable

The checkbox itself is really small to tick. And any modern form should support the feature that you can click the label.

Using html "for=":
<input type='checkbox' id='cbType_all' name='category' value='all' /><label for='cbType_all'>All</label>

Appending mutliple items to form with dform function

I have an existing form created with the dform function and I have been adding more to the form using the form's name as a selector and repeating the dform function.

If I add a single item with the repeated dform function everything works great. If I try to add multiple items, only the first item is added to the form. To get dform to recognize multiple items I have used "html" with options as follows:

$("#myform").dform({
        "html" :
         [
             {"type" : "text"},
             {"type" : "text"}
         ]
});

I went with this for a while because it seemed to work, but I found out that the inputs added this way do not get POSTed. I am able to use the GET method with them just fine, but on POST they are ignored.

Error in Accordion: Caption

The current version of dForm incorrectly displays form items as a sub accordian when they item has a caption:

$("#myform").buildForm({
"action" : "index.html",
"method" : "get",
"elements" : [
{
"type" : "accordion",
"caption" : "Title",
"entries" :
[
{
"caption" : "First Accordian",
"elements" :
[
{
"caption" : "Test Box",
"id" : "txtTestBox",
"name": "testBox",
"type": "text"
}
]
}
]
}
]
});

Reset button

Add reset button type

When using with AngularJS Submit button does not do anything

When using dform with AngularJS website, when the submit button is clicked the form does not submit.

Validation on Checkboxes and Radios cause the form to fail

If you apply a required value to checkboxes or radios it kill the form.

$.val on hidden element does not work

Since the value subscriber is simply inserting a string value, why is .val being used to set the contents? I'm guessing this is so that custom elements with closing tags are also updated.

That being said, the .val method does not update the contents of a form field if it or a parent element is hidden with style="display:none".

I'm creating my form and inserting it into another div which is popped up as a modal dialog. Since the form is being created pre-modal, it's value is not updated. Perhaps the documentation should mention something about this, it was just the cause of nearly an hour of frustration.

Validation

Add subscribers for form validation

<select> bug

My CSS developers have been examining the code produced by dForm and have found the following:

<select label="Incomplete Reason Code" id="rr03-irc" name="custName" validate="[object Object]" class="ui-dform-select">

Accoding to W3C (http://www.w3.org/wiki/HTML/Elements/select) the label is not a supported attribute and a separate tag should be generated. Cheers, Roy

IE shows alle inputs as text

seems attribute "type" won't be parsed for internet explorer. so every input tag will be shown as text.

Checkbox set Checked ?

Hi there,

I was looking for a way to set the CHECKED state of a checkbox.
As far as i can see this is not yet supported.
Before I start working on this feature I wanted to double check if i maybe overlooked something or is it indeed not yet supported ?

Gerard

Documentation

Improve documentation, document every subscriber function and move it to the Wiki (to automatically generate matching HTML documentation)

How to make different name of checkbox?

             {
                "type":"checkboxes",
                "name":"color",
                "options":{
                    "blue" : {
                        "value":"blue",
                         "caption":{
                            "html" : "Blue",
                            "css" : {
                                "display" : "inline"

                            }
                        },
                        "css" : {
                            "display" : "inline"
                        }
                    },
                    "red" :  {
                        "value":"red",
                        "caption":{
                            "html" : "Red",
                            "css" : {
                                "display" : "inline"

                            }
                        },
                        "css" : {
                            "display" : "inline"
                        }
                    },
                    "black" :  {
                        "value":"black",
                        "caption":{
                            "html" : "Black",
                            "css" : {
                                "display" : "inline"

                            }
                        },
                        "css" : {
                            "display" : "inline"
                        }
                    }
                }

This code generates

          <div class="ui-dform-checkboxes">
               <input type="checkbox" class="ui-dform-checkbox" value="blue" name="color" style="display: inline;">
               <label class="ui-dform-label" style="display: inline;">Blue</label>
               <input type="checkbox" class="ui-dform-checkbox" value="red" name="color" style="display: inline;">
              <label class="ui-dform-label" style="display: inline;">Red</label>
              <input type="checkbox" class="ui-dform-checkbox" value="black" name="color" style="display: inline;">
              <label class="ui-dform-label" style="display: inline;">Black</label>
     </div>

I want to add different name of all checkbox.

like this

          <input type="checkbox" class="ui-dform-checkbox" value="blue" name="colorblue" style="display: inline;">
          <input type="checkbox" class="ui-dform-checkbox" value="blue" name="colorred" style="display: inline;">
          <input type="checkbox" class="ui-dform-checkbox" value="blue" name="colorblack" style="display: inline;">

how can i do this using dform?

JS fiddle demos break in new Chrome builds

New version of Chrome respect github's JS hotlinking blocking; this breaks your demos

URL: http://jsfiddle.net/Daff/Zt4Rz/

Error:
Refused to execute script from 'https://raw.github.com/daffl/jquery.dform/master/dist/jquery.dform-1.0.1.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Screenshot:
http://dl-web.dropbox.com/u/29440342/screenshots/KYRPVM-2013.6.3-13.49.png

Background:

• https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox
• https://code.google.com/p/chromium/issues/detail?id=180007

Workaround:

• consider using Github pages,
• also can use https://rawgithub.com/ but this is a privately-hosted service, and might go down anytime
  • http://jsfiddle.net/JnRE3/

Also see similar bug report: powmedia/backbone-forms#242

radiobuttons - select the first one

Hi!

I'm having a problem with radiobuttons.
When I have two questions with radiobuttons, if I click in the text of any option, he checks the first option of the first question.
I'm not using labels.
The structure I'm using is:

http://jsfiddle.net/Gx3ak/

Can you help me?

Thank you!

UI slider with hidden input

Create an additional type that creates a UI slider that is attached to a hidden input field.

Discussion: http://groups.google.com/group/jquery-dform/browse_thread/thread/42dae6b66432b5ff

buildForm appends form to form

$("#metaForm").buildForm(json);

generates:

<form id="metaForm"><form class="ui-dform-form">

Issue in type date and checkbox

Hey this type of response is given
So issue is that
{"name": "isMarried","type": "boolean","value": true,"scope": "global"},
{"name": "birthdate","type": "date","value": "2014-06-24T07:00:00Z","scope": "global"}

in this json how can i set checkbox in "type":"boolean" and create date for that type:date for rendering that html form.??

jQgrid support

Add support for the jQuery grid plugin jQgrid (http://www.trirand.com/blog/)

Missing jquery.dform.ui.js in repo

Small and easy fix. I had to download the jquery.dform.ui.js out of the online demo to get the demo pages working.

Thanks.

How can I don't use the 'form' tag?

I want to handle the form tag by myself, for my case, I need to dynamic generate the form elements within difference tabs(these tabs are dynamic generate from backend), because these data are from backend programming, so I don't want to use the build-in tab function in dform, for example, my html code:

<form id="myform" action="#">
<tab id=1>
       //call dform to generate the form elements
</tab>
<tab id=2>
       //call dform to generate the form elements
</tab>
...
</form>

but the dform function will always generate the form tag(for my case, there will be many of form tag in the page), so I can't use my global form tag to handle the submit event.

Any ideas for this case?

Thanks!

a core subscriber for event handdling.

Hi. I know that I could customize my own subscriber but as a default input behavior, I think it's more appropriate a core subscriber to attach events handlers.

{
 "type" : "submit",
 "value" : "Login",
"on": {
    "click": function(e) {
         alert("Warning..."); },
    "keypress": [
        foo, 
        function(e){ 
            e.preventDefault(); }
        ]
    }
}

Thank you your attention.

Multiple select in IE6

I'm not sure if IE6 is supported, but here goes:

var opt = {
    "type" : "select",
    "multiple": "multiple",
    "size": 5,
    "options" : {
        "us" : "USA",
        "ca" : "Canada",
        "de" : "Germany"
    }
};

$("form").dform({
    "action" : "index.html",
    "method" : "get",
    "html" : [opt]
});

In IE6 first <option/> is always selected. Trying to deselect it with $("option").first().prop("selected", false); doesn't work. When I dynamically create <select/> with jQuery (i.e. without dform) this effect is not present, and selecting/deselecting with $.fn.prop works fine. Unfortunately I work in project where IE6 must be supported:(

assign value doesn't work when json is loaded from external file

THIS WORKS (#txt-username has assigned a value):

$(document).ready(function () { 
    $("#MyForm").dform({
            "html":
            [
                {
                    "type": "p",
                    "html": "You must login"
                },
                {
                    "name": "username",
                    "id": "txt-username",
                    "caption": "Username",
                    "type": "text",
                    "placeholder": "E.g. [email protected]"
                }
            ] } );
      $("#txt-username").val("NEW VALUE");
});

THIS DOES NOT WORK (#txt-username is empty):

$(document).ready(function () { 

    $("#MyForm").dform("json/MyForm.js");
    $("#txt-username").val("NEW VALUE");
});

-- MyForm.js --

{
    "html": [
        {
            "type": "p",
            "html": "You must login"
        },
        {
            "name": "username",
            "id": "txt-username",
            "caption": "Username",
            "type": "text",
            "placeholder": "E.g. [email protected]"
        }
    ]}
}

Ajax

Support AJAX form submit and remote form definition loading

Help to implement feature to set Values

I'd like to write a feature for jquery.dform which allows a second json string or filename to be specifeid with the values for the form. While it is obviously possible to simply pass the values in with the json I think it is a good idea to keep the form definition and the data seperate.

I was hoping to do something like this

 $("#demo-1-form").dform('myform.json', 'formvalues.json');

This would enable a form to be used again and again, eg, edit values and then when you go back to the form the values are filled in. I have looked around the sourcecode and my javascript is ok but obviously not good enough.

Could you point me in the right direction to find the places I would need to put my code. Ideally the thing to do with be to add the value elements to the form schema json before it is ever turned into input elements.

If you point me in the right direction I will implement and submit as a pull request.

jQuery plugin structure

According to the jQuery Plugin Documentation (http://learn.jquery.com/plugins/basic-plugin-creation/) the plugin’s code should go into $.fn.dform rather than $.dform.

plugin validation method

Hi,
can i use these methods with dform (errorPlacement,highlight,etc..) ??

example normal use of validation plugin

jQuery("#container").validate({
    errorElement: 'div',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {},
    highlight: function (e) {},
    success: function (e) {},
    invalidHandler: function(event, validator) {}
});

Wysiwyg

Add support for one or more Wysiwyg editors

HTML 5 Forms

Use HTML 5 forms if supported by the browser

New Feature: "url" pair for member/elements

The request to to add a "url" pair to member and element lists for the dForm plugin. The syntax would be of the format:

"url" : "http://...."

and would be applied as follows:

...
"elements" :
    [
        { "url" : "http://example.com/json/element-list.json" }
    ]
...

In th case of an accordion, the .json file would contain one or more of the following:

{
"caption" : "Customer Information",
"elements" : [ {...} ]
}

In the case of a the .json file would contain: { "value", "text", "value", "text", "value", "text", "value", "text" } This would allow for truly dynamic forms. Cheers, Roy

Name attribute on IE 7

Similar to issue #14, in IE7 "name" attribute is required during the creation of the element.

Server side JSON generators

Develop libraries to support the server side JSON generation for forms. Currently planned:

• PHP (later adding support for scaffolding Doctrine objects)
• Java (generation from Java Beans and Validator annotations)

Is dform blocking?

Hi,

If I do not use ajax features and pass html options by myself is dform blocking? I don't see any callbacks I can register so I assume it is blocking, but I just want to be sure. Thanks.

Please consider MIT or similar license

jquery.dform is off to a great start, and I'm looking at it for a replacement to the YUI inputEx library. I'm also very interested in contributing things like JSON Schema support, etc. I think in order for dform to gain traction, it's going to need a more liberal license such as the MIT (which jQuery uses as an alternative to the GPL), BSD, or Apache License.

Please consider switching (or adding as an alternative) a more liberal license such as the MIT.

Thanks.

Delay $.subscribeIf

Conditional loading of subscribers and types should be delayed until they are actually used, since having to include the files before seems to confuse people and produce a lot of errors.

It seems the validation is not working...

I tried to use the validation, but it doesn't work, you can try in here:

http://jsfiddle.net/out4veth/4/

when I click the login button, the form is submit and there is no any validation :(

I am using this jquery validation plugin, should be the same with yours, right?

https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js

the website:

http://jqueryvalidation.org/

Dynamic label links

Labels don't automatically have a "for" attribute when generated, so they aren't linked to any element.
This means that when the user clicks a label, input isn't focused.
Same goes with accessibility, screen readers don't know what label belongs to what element.

Would auto-generating id's for each element be possible?

Ajax loading JSON

Should return a Deferred and accept an error handler

Error? Form to Json...

Not appear:
select
optgroup

checkboxes

http://jsfiddle.net/sxGtM/4388/

any other ways to dynamic set the default values in dform?

my case is after submit the form to backend, and also need to edit these form data, so I need to get these values and set them in edit page, but after I generate the dform, seems can't set the values dynamic, any ideas?

thanks!!

AJAX doesn't work in IE

var formdata =
{
"action" : "index.html",
"method" : "get",
"elements" :
[
{
"name" : "textfield",
"label" : "Label for textfield",
"type" : "text",
"value" : "Hello world"
},
{
"type" : "submit",
"value" : "Submit"
}
]
};
$("#myform").buildForm(formdata);

// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");

...doesn't work in IE.

best,
heinetz

value subscriber runs before option subscriber

If you have:

{ type: 'select', value: 'b', options: { a: 'A', b: 'B' }}

The value subscriber runs first and since there are no options yet, nothing gets selected.

If you reverse the keys:

{ type: 'select', options: { a: 'A', b: 'B' }, value: 'b'}

It works, however since you can't rely on the sort order of javascript object keys the code should make sure to run the value subscriber last (or at least after the options)

File upload

• Add support for file Uploads and Multi File upload Plugin (maybe http://plugins.jquery.com/project/MultiFile)