Added option: "typeUserAttrs".

[gimigliano]

Suppose you want to add "min" and "max" to all "date" fields and moreover you want to add a parameter "columns" from 1 to 6 to all the "radio-group"

typeUserAttrs:{
'date':{
'min':{'label':'Date min.','maxlength':'10','description':'Minimum'},
'max':{'label':'Date max.','maxlength':'10','description':'Maximum'}
},
'radio-group':{
'columns':{'label':'Column number', 'options':{1:'one',2:'two',3:'three'}
}
},

[kevinchappell]

is this meant to wrap until L768?

[gimigliano]

Yes I inserted only three blocks

[kevinchappell]

Right but i meant that the conditional starts and ends on L735 because it has {}. Once thats fixed we can merge.

[gimigliano]

No are 3 differents blocks don't see this page but find them in de .js file. It's more easy

[kevinchappell]

I've been testing the last couple hours and seems to work well. In the future we may want to add support for boolean type attributes such as disabled or readonly but I think this is a great start.

After fixing the conditional on L735 I can merge and will add documentation shortly after. Is it okay to use the PR description for documentation and demo?

[gimigliano]

In today version yo can adda all the attributes you want they will be used without control (so disabled readonly onchange etc. too).
Eg.

typeUserAttrs:{
'radio-group':{
                    'pubdate':{'label':'Pubblication date',  
                                    'type':'date', 
                                    'min':'2016-01-01' , 
                                    'style':'color:red'
                                   } 
                 }

[kevinchappell]

Looking good, but do options still work? I pulled the changes but now my previous config does not work. Example:

'radio-group':{
  'columns': {
    'label': 'Column number', 
    'options': {
      1: 'one',
      2: 'two',
      3: 'three'
    }
}

[gimigliano]

Yes, if options is present the attribute is forced as a "select"

'radio-group':{
 'columns': {
    'label': 'Column number', 
    'options': { //applied
        1: 'one',
        2: 'two',
        3: 'three'
        },
 'type': 'text', //ignored
 'onchange':'alert(1)', //applied
 'title':'Columns number' //applied
}

[kevinchappell]

looking and working good. needs that one final change and should be good to go.

[kevinchappell]

To get the select properly i had to change this:

+'<' + selectOpen + '>'

I just saw your correction here but markup is still partially malformed and causes first option to not show.

[gimigliano]

Yes now is correct but I saw the select built correctly on firefox ... I hope now is closed

[kevinchappell]

Working good for me now. Good work on this, extremely useful feature.

[kevinchappell]

Documentation and demo of this feature in action has been added. http://formbuilder.readthedocs.io/en/latest/formBuilder/options/typeUserAttrs/

[eradin]

Nice feature. I thought it might come in handy for my validation problem but it doesn't. I'm using parsley.js and I want to validate a telephone number (US style) on the rendered form. There is no telephone sub type for a text field. Although, with parsley, I can add a data attribute to the generic text field (data-parsley-phone="true") and it will validate the field for the proper phone format. Unfortunately, there is no way to tack on user supplied attributes using this new option. It would be nice to have a field (e.g. attributes?) similar to the class field that would accept a string verbatim and tack that string onto the input tag. Saving and loading a form would also need to preserve those attributes.

[kevinchappell]

I was going to say you could use a pattern attribute similar to here but I saw it gets escaped so looks like some work is needed there.

Edit: i just pushed a fix so attributes should be escaped correctly. Check this pen to see it in action but you may need to wait a bit since gh-pages seems to be a little slow today.

I will also add a phone subtype in the coming days.

[eradin]

Thanks Kevin. The pattern doesn't solve my problem but adding tel as a sub type would (just tested it). If you are going to add tel, consider adding number also. These are really just text types but they allow mobile browsers to bring up the alternative keyboard. Cheers.

[kevinchappell]

@eradin The phone pattern is working for me locally but for some reason gh-pages is still serving v1.18.0 instead of v1.19.2. I understand it may not suit your use case though.

Can you describe the number input? Is it just <input type="number">? That should already be enabled by default. Originally it was disabled but about a month ago it was made enabled by default.

I'll add tel now.

[eradin]

http://formbuilder.online/assets/js/form-builder.min.js is serving up 1.18.
Scratch the number type request. I see it on the pallet. I didn't notice it before. tel probably only needs to be a sub-type of text.

[kevinchappell]

I just checked https://formbuilder.online/assets/js/form-builder.min.js and it seems to be serving 1.19.3 now. May need to clear cache. 1.19.3 has tel subtype of text

[eradin]

Yup, that was the problem. Looks real good. Not to be picky but is there a simple way for you to make the dropdown say phone or telephone but insert a tel type? I'm afraid users won't get the short form name.

[kevinchappell]

That makes sense but would require a bit of refactoring to make happen. I'll look into it though when I get the chance.

[dinevillar]

This feature have errors on the textUserAttrs function when you try to add a checkbox as a custom attribute field. The 'form-control' class added to the checkbox destroys its look and when you try to add a field on the defaultFields with this custom attribute set to true/false it is not setting the value. Anyway, I made a fix myself:

function textUserAttrs(name, options) {
      var textAttrs = {
        id: name + '-' + lastID,
        title: options.description || options.label || name.toUpperCase(),
        name: name,
        type: options.type || 'text',
        className: 'fld-' + name + (options.type === 'checkbox' ? '' : ' form-control')
      },
          label = '<label for="' + textAttrs.id + '">' + opts.messages[name] + '</label>';
      if (options.type === 'checkbox' && options.value) {
        textAttrs.checked = 'checked';
      }
      textAttrs = Object.assign({}, options, textAttrs);
      var textInput = '<input ' + utils.attrString(textAttrs) + '>';
      return '<div class="form-group ' + name + '-wrap">' + label + textInput + '</div>';
    }

[kevinchappell]

@dinevillar good catch on that.