Input attributes

[DanielH 32]

Trying to style formbuilder input fields to match the other forms produced by jreviews. i.e: userprofiles register form and want to remove the title and use the placeholder attribute.

 

In the sample schema below "maxLength" and input validations I've used work but not the "placeholder". How do you use placeholder?

    {
        "title": "Contacts",
        "type": "array",
        "format": "grid",
        "items": {
            "title": "Contact",
            "type": "object",
            "properties": {
                "deptTitle": {
                    "title": "Dept",
                    "type": "string",
		    "name": "Department",
		    "maxLength": 50,
                    "placeholder": "department"
                },
                "nameValue": {
                    "title": "Name",
                    "type": "string",
		    "maxLength": 36,
                    "placeholder": "name"
                },
                "phValue": {
                    "title": "Phone",
                    "type": "string",
                    "pattern": "^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$",
		    "maxLength": 14,
                    "placeholder": "phone"
                },
                "extValue": {
                    "title": "Ext",
                    "type": "string",
		    "maxLength": 5,
                    "placeholder": "extension"
                },
                "mailValue": {
                    "title": "Email",
                    "type": "string",
		    "maxLength": 45,
                    "placeholder": "email"
                }
            }
        }
    }

Reading up and every example I have found this is the format for these attributes.

 

Thank you

Daniel

[Alejandro 676]

I don't believe placeholders are possible. You can check directly on the page of the json-editor script we chose for the formbuilder functionality. 

[DanielH 32]

Thanks for the link. That explains a lot and see it was brought up but haven't seen any solution for some html5 attributes or reference to them being added. Its recommended to add the placeholder to the options: {} which does not work on my end. Probably would be easier to style all other forms to match formbuilder fields then the other way around. 

 

I also noticed the output for the form field ends up as:

<div class="jrGrid">
    <div class="jrCol12" data-schematype="string" data-schemapath="root.0.deptTitle">
        <div class=" jrFieldDiv">
            <label class=" jrLabel">Dept</label>
            <input class="getFormInputField" name="root[0][deptTitle]" type="text">
        </div>
        <div></div>
    </div>
</div>

for the field name which is generated dynamically and the name attribute also does not work with the schema. If that's the only way it works then no worries. I'll use better suited property names.

 

Another thing I'm finding when using validation patterns the error message uses the validation syntax itself which no user would understand if needing to correct the input. If using only the "format": "type", syntax with no validation pattern it does validate the field and the error is noted by red highlight around the input with no message. From what I can see custom_validators/messages can only be added to the editor core javascript.

 

Is this the case or is there another way to add validation and custom error messages?

 

Are all format types included with the editor or do they have to be added and styled if needed?

(color, date, datetime, datetime-local, email, month, number, range, tel, text, textarea, time, url, week)

Some loose styling on the form.

 

Thanks

Daniel

[Alejandro 676]

 

 

for the field name which is generated dynamically and the name attribute also does not work with the schema. If that's the only way it works then no worries. 

 

I don't understand your comment. Why would you want to control the name on the inputs? After all, it's the script and JReviews that are in charge of collecting the data from this field and this is working fine.

 

Is this the case or is there another way to add validation and custom error messages?

 

 

We didn't consider validation for this field and thus also didn't document it. There's no point in validating something only at the browser-side if we can't also validate it server-side and we can't because you can virtually add anything to this new form inside a form.

 

Are all format types included with the editor or do they have to be added and styled if needed?

(color, date, datetime, datetime-local, email, month, number, range, tel, text, textarea, time, url, week)

 

 

Some of those are HTML5 inputs native to the browser, like color, datetime, month, ... and won't look anything at all like the JReviews custom fields for data for example. What styles are getting lost specifically?

[DanielH 32]

The format for "tel" telephone is the only one I am currently using that looses styling. Will stop using the format setting altogether.

 

I was just trying to uniformly style and maintain all inputs on the site instead of having different function and look depending on the form in different areas of the site. If a user enters invalid information, url, email, phone etc... then its useless as content or contact information. I guess the easiest thing to do is style userprofile addon inputs to match the site and formbuilder instead of the other way around.

 

For anyone that wants to make fields required.

Using the "required" function does not make a field required, it only makes the field to be required in the form. You must use the "minLength": 1 setting in your schema for each item/uri you want required. There is a setting in the editor to set how this is handled globally. (On Interaction, On Field Change, Always, Never) Using "minLength": 1 will output a default error message "Value required."

 

The link Alejandro provided above is a good resource.

 

Thanks

Edited October 13, 2016 by DanielH