how to validate form which is prepared dynamically using dfom plugin? - javascript

can you please tell me how to validate form which is prepared dynamically using dfom plugin?
I used jquery validation but it don't work on chrome.
can you please tell me why dform with jquery validation not working in chrome ?.It is working fine in firefox but not with in chrome why ?? Here is http://jsfiddle.net/8bweG/13/?
$("#sform").dform(
{
"elements": [
{
"html": [
{
"html": [
{
"type": "number",
"id": "totalRetryCount",
"name": "totalRetryCount",
"required": false,
"value": 0,
"tabindex": 1,
"validate": {
"messages": {
"number": "Naveen Kanjush hain"
}
}
}
],
"type": "fieldset",
"caption": "Total Retry Count"
},
{
"html": [
{
"type": "number",
"id": "totalRepeatCount",
"name": "totalRepeatCount",
"required": false,
"value": 0,
"tabindex": 2,
"validate": {
"messages": {
"number": "Naveen Kanjush hain"
}
}
}
],
"type": "fieldset",
"caption": "Total Repeat Count"
},
{
"html": [
{
"type": "select",
"options": {
"true": "true",
"false": "false"
},
"id": "summaryReportRequired",
"name": "summaryReportRequired",
"required": false,
"value": "true",
"tabindex": 3,
}
],
"type": "fieldset",
"caption": "Summary Report Required"
},
{
"html": [
{
"type": "select",
"options": {
"ALWAYS": "ALWAYS",
"ON_SUCCESS": "ON_SUCCESS"
},
"id": "postConditionExecution",
"name": "postConditionExecution",
"required": false,
"value": "ON_SUCCESS",
"tabindex": 4,
}
],
"type": "fieldset",
"caption": "Post Condition Execution"
}
],
"type": "div",
"class": "inputDiv",
"caption": "<h3>Configuration Parameters</h3>"
}
],
"id": "testSuiteConfigurationform",
"name": "testSuiteConfigurationform",
"method": "post"
}
);
Problem is that
First field of type ="number".User only type number in that .If user type string or character and move to another field it gives error.if you check on firefox this fiddle it is giving validation error .But on chrome and safari same functionality not work.
please follow these steps
on first field write "abc" then click below or next field.it gives error front of first field.it is display on firefox but not on chrome

It is working but you are missing the Submit button.
This is the correct version: http://jsfiddle.net/8bweG/22/
$("#sform").dform({
"action" : "http://dgg.gg",
"method" : "get",
"elements": [
{
"html": [
{
"html": [
{
"type": "number",
"id": "totalRetryCount",
"name": "totalRetryCount",
"required": false,
"value": 0,
"tabindex": 1,
"validate": {
"messages": {
"number": "Naveen Kanjush hain"
}
}
}
],
"type": "fieldset",
"caption": "Total Retry Count"
},
{
"html": [
{
"type": "number",
"id": "totalRepeatCount",
"name": "totalRepeatCount",
"required": false,
"value": 0,
"tabindex": 2,
"validate": {
"messages": {
"number": "Naveen Kanjush hain"
}
}
}
],
"type": "fieldset",
"caption": "Total Repeat Count"
},
{
"html": [
{
"type": "select",
"options": {
"true": "true",
"false": "false"
},
"id": "summaryReportRequired",
"name": "summaryReportRequired",
"required": false,
"value": "true",
"tabindex": 3,
}
],
"type": "fieldset",
"caption": "Summary Report Required"
},
{
"html": [
{
"type": "select",
"options": {
"ALWAYS": "ALWAYS",
"ON_SUCCESS": "ON_SUCCESS"
},
"id": "postConditionExecution",
"name": "postConditionExecution",
"required": false,
"value": "ON_SUCCESS",
"tabindex": 4,
}
],
"type": "fieldset",
"caption": "Post Condition Execution"
},
{
"html": [
{
"type" : "submit",
"value" : "Login"
}
],
"type": "fieldset",
"caption": "Go away"
}
],
"type": "div",
"class": "inputDiv",
"caption": "<h3>Configuration Parameters</h3>"
}
],
"id": "testSuiteConfigurationform",
"name": "testSuiteConfigurationform",
"method": "post"
}
);

Related

javascript json iteration to get key and value

I am trying to iterate the json below, I have got this as an output of an astify of sql parser. Now i want to validate the column type with a DB schema that i have.
{
"with": null,
"type": "select",
"options": null,
"distinct": null,
"columns": "*",
"from": [
{
"db": null,
"table": "TABLE_1",
"as": null
}
],
"where": {
"type": "binary_expr",
"operator": "AND",
"left": {
"type": "binary_expr",
"operator": "AND",
"left": {
"type": "binary_expr",
"operator": "=",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_1"
},
"right": {
"type": "string",
"value": "NORM"
}
},
"right": {
"type": "binary_expr",
"operator": "IN",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_2"
},
"right": {
"type": "expr_list",
"value": [
{
"type": "string",
"value": "11"
},
{
"type": "string",
"value": "12"
},
{
"type": "string",
"value": "13"
},
{
"type": "string",
"value": "14"
},
{
"type": "string",
"value": "15"
},
{
"type": "string",
"value": "16"
},
{
"type": "string",
"value": "17"
},
{
"type": "string",
"value": "18"
},
{
"type": "string",
"value": "42"
},
{
"type": "string",
"value": "43"
},
{
"type": "string",
"value": "44"
},
{
"type": "string",
"value": "45"
},
{
"type": "string",
"value": "101"
},
{
"type": "string",
"value": "102"
},
{
"type": "string",
"value": "103"
},
{
"type": "string",
"value": "104"
},
{
"type": "string",
"value": "128"
},
{
"type": "string",
"value": "129"
},
{
"type": "string",
"value": "130"
},
{
"type": "string",
"value": "131"
},
{
"type": "string",
"value": "159"
}
]
}
}
},
"right": {
"type": "binary_expr",
"operator": "OR",
"left": {
"type": "binary_expr",
"operator": "IS NOT",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_3"
},
"right": {
"type": "null",
"value": null
}
},
"right": {
"type": "binary_expr",
"operator": "=",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_4"
},
"right": {
"type": "number",
"value": 1
}
},
"parentheses": true
}
},
"groupby": null,
"having": null,
"orderby": null,
"limit": null
}
Can you please help me get an output like which will help me identify the column and its type whether its string or not. Basically i need to validate the query whether its mapped against the correct data type while using a var condition.
Output like:
map = <key,value>
<Column_1, String>
<Column_2, String>
<Column_3, INT>
etc.
#Suzy, please check below code for your reference:
var arr = {
"with": null,
"type": "select",
"options": null,
"distinct": null,
"columns": "*",
"from": [
{
"db": null,
"table": "TABLE_1",
"as": null
}
],
"where": {
"type": "binary_expr",
"operator": "AND",
"left": {
"type": "binary_expr",
"operator": "AND",
"left": {
"type": "binary_expr",
"operator": "=",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_1"
},
"right": {
"type": "string",
"value": "NORM"
}
},
"right": {
"type": "binary_expr",
"operator": "IN",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_2"
},
"right": {
"type": "expr_list",
"value": [
{
"type": "string",
"value": "11"
},
{
"type": "string",
"value": "12"
},
{
"type": "string",
"value": "13"
},
{
"type": "string",
"value": "14"
},
{
"type": "string",
"value": "15"
},
{
"type": "string",
"value": "16"
},
{
"type": "string",
"value": "17"
},
{
"type": "string",
"value": "18"
},
{
"type": "string",
"value": "42"
},
{
"type": "string",
"value": "43"
},
{
"type": "string",
"value": "44"
},
{
"type": "string",
"value": "45"
},
{
"type": "string",
"value": "101"
},
{
"type": "string",
"value": "102"
},
{
"type": "string",
"value": "103"
},
{
"type": "string",
"value": "104"
},
{
"type": "string",
"value": "128"
},
{
"type": "string",
"value": "129"
},
{
"type": "string",
"value": "130"
},
{
"type": "string",
"value": "131"
},
{
"type": "string",
"value": "159"
}
]
}
}
},
"right": {
"type": "binary_expr",
"operator": "OR",
"left": {
"type": "binary_expr",
"operator": "IS NOT",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_3"
},
"right": {
"type": "null",
"value": null
}
},
"right": {
"type": "binary_expr",
"operator": "=",
"left": {
"type": "column_ref",
"table": null,
"column": "COLUMN_4"
},
"right": {
"type": "number",
"value": 1
}
},
"parentheses": true
}
},
"groupby": null,
"having": null,
"orderby": null,
"limit": null
};
function findProp(obj, key, out) {
var i,
proto = Object.prototype,
ts = proto.toString,
hasOwn = proto.hasOwnProperty.bind(obj);
if ('[object Array]' !== ts.call(out)) out = [];
for (i in obj) {
if (hasOwn(i)) {
if (i === key) {
out.push(obj[i]);
} else if ('[object Array]' === ts.call(obj[i]) || '[object Object]' === ts.call(obj[i])) {
findProp(obj[i], key, out);
}
}
}
return out;
}
console.log(findProp(arr, "column"));
Parse the JSON into an object using JSON.parse(), then iterate through them while checking if the value is JSON or not.
Check if the value is JSON by using catch on JSON.parse()
To get the object keys for iteration, Use var keys = Object.keys();

loopback referencesMany relations with array not working

when i use relation referencesMAny with array in loopback. i have got error when i remove referencesMAny relation it's working. i am using loopback 3
{ "error": {
"statusCode": 500,
"name": "Error",
"message": "5d53eaa49b826748f0b72ca5is not an ObjectID string",
}}
it's my json schema :
{
"name": "Products",
"plural": "Products",
"strict": true,
"idInjection": true,
"options": {
"validateUpsert": true
},
"mixins": {
"TimeStamp": true
},
"properties": {
"name": {
"type": "string",
"default": ""
},
"image": {
"type": [],
"required": true,
"default": []
},
"about": {
"type": "string",
"required": true,
"default": ""
},
"categoryId": {
"type": [],
"required": false,
"default": []
},
"userId": {
"type": "string",
"required": true,
"default": ""
},
"storeId": {
"type": "string",
"required": true,
"default": ""
},
"location": {
"type": "geopoint",
"required": false
},
"price": {
"type": "object",
"required": true,
"default": {
"discount": "",
"actualRate": "",
"finalRate": ""
}
},
"createdAt": {
"type": "date"
},
"updatedAt": {
"type": "date"
}
},
"validations": [],
"relations": {
"userDeatils": {
"type": "belongsTo",
"model": "Users",
"foreignKey": "userId"
},
"categories": {
"type": "referencesMany",
"model": "Categories",
"foreignKey": "categoryId"
},
"storeDeatils": {
"type": "belongsTo",
"model": "Users",
"foreignKey": "userId"
}
},
"acls": [
{
"accessType": "*",
"principalType": "ROLE",
"principalId": "admin",
"permission": "ALLOW"
},
{
"accessType": "*",
"principalType": "ROLE",
"principalId": "$authenticated",
"permission": "ALLOW"
},
{
"accessType": "WRITE",
"principalType": "ROLE",
"principalId": "$everyone",
"permission": "ALLOW"
},
{
"accessType": "*",
"principalType": "ROLE",
"principalId": "$unauthenticated",
"permission": "DENY"
}
],
"methods": {}
}
my json data object like this :
{
"name": "deara",
"image": ["dsadsa"],
"about": "dear ser",
"categoryId": [
"5d53eaa49b826748f0b72ca5"
],
"userId": "dsdsadsa",
"storeId": "dsdsadsadsad",
"location": {
"lat": 0,
"lng": 0
},
"price": {
"discount": "121",
"actualRate": "321",
"finalRate": "231"
},
"createdAt": "2019-08-09T12:02:54.514Z",
"updatedAt": "2019-08-09T12:02:54.514Z"
}
i don't understand where am i wrong.
thanks in advance
Loopback expects that dsadsad232323 will be an identifier of an object of another model, so categoryId must be array of id.

Required suggestion related to generating dynamic forms using angular

here i am facing a conflict i have a requirement where by using a complex json i need to develop a multiple fields and that fields also will be displayed based on multiple if condition & the validation also to be done only to certain fields so here i just want to know to this kind of scenario which approach is better
Reactive Approach or 2. Not following the angular approach and following a normal dynamic fields creation
sample Json:
{
"name": "hugo",
"type": "object",
"required": [
"host",
"quantity",
"id"
],
"info": {
"host": {
"editable": false,
"visible": true,
"type": "string",
"group": true
},
"information": {
"type": "object",
"properties": {
"filetype": {
"visible": true,
"search": "date",
"editable": true,
"type": "string",
"group": true
},
"id": {
"visible": true,
"type": "string",
"editable": true,
"group": false
},
"size": {
"visible": true,
"type": "integer",
"editable": true,
"group": false
},
"filename": {
"visible": true,
"type": "string",
"editable": true,
"group": false
}
}
},
"picture": {
"type": "object",
"properties": {
"hash": {
"search": "yes",
"group": true,
"editable": false,
"visible": true,
"type": "string"
},
"url": {
"search": "yes",
"group": false,
"editable": true,
"visible": true,
"type": "string"
}
}
},
"quantity": {
"editable": true,
"visible": true,
"type": "string",
"group": true
},
"id": {
"group": false,
"editable": true,
"visible": true,
"type": "string"
}
}
}
here i have to structure the form like below
information -> this is name & below are the fields
--filetype
--id
what ever under information,picture & host ,quantity has to be created as fields say like form groups

Kendo Treeview of checkboxes not working in angular js

I am implementing kendo treeview of checkboxes in angular. I get no error, but tree is not rendering. My code is here:
addCtrl.js
$scope.updateTree = function () {
websiteService.getWebsiteFeaturesTree(webName, function (data) {
$scope.treeOptions = {
checkboxes: {
checkChildren: true
}
};
$scope.treeDataSource = data;
});
}
add.html
<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>
app.js
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'kendo.directives']);
I get datasource from webservice. here is json
// 20160930204148
// http://localhost/api/Website/GetWebsiteFeaturesTree?webName=MetisEmptyTemplate
[
{
"Name": "Section",
"text": "Admin",
"checked": false,
"items": [
{
"Name": "Tab",
"text": "Matrix Analysis",
"checked": true,
"items": [
]
},
{
"Name": "Tab",
"text": "Risk Categories and Questions",
"checked": true,
"items": [
]
},
{
"Name": "Tab",
"text": "Risk Colors",
"checked": true,
"items": [
]
},
{
"Name": "Tab",
"text": "SWOT Types",
"checked": false,
"items": [
]
}
]
},
{
"Name": "Section",
"text": "Strategy",
"checked": false,
"items": [
{
"Name": "Tab",
"text": "SWOT Analysis",
"checked": false,
"items": [
{
"Name": "Grid",
"text": "SWOT Grid",
"checked": true,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": false,
"items": [
{
"Name": "Output",
"text": "SWOT Box",
"checked": false,
"items": [
]
}
]
}
]
}
]
},
{
"Name": "Section",
"text": "Portfolio",
"checked": true,
"items": [
{
"Name": "Tab",
"text": "Matrix",
"checked": true,
"items": [
{
"Name": "Grid",
"text": "Matrix Grid",
"checked": true,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": true,
"items": [
{
"Name": "Output",
"text": "Matrix Output",
"checked": true,
"items": [
]
}
]
}
]
},
{
"Name": "Tab",
"text": "Strategy",
"checked": true,
"items": [
{
"Name": "Grid",
"text": "Strategy Grid",
"checked": true,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": true,
"items": [
{
"Name": "Output",
"text": "Investment Level by Objective",
"checked": true,
"items": [
]
}
]
}
]
},
{
"Name": "Tab",
"text": "Risk",
"checked": true,
"items": [
{
"Name": "Grid",
"text": "Risk Grid",
"checked": true,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": true,
"items": [
{
"Name": "Output",
"text": "Portfolio Risk",
"checked": true,
"items": [
]
},
{
"Name": "Output",
"text": "Portfolio Risk Stacked Bar",
"checked": true,
"items": [
]
}
]
}
]
}
]
},
{
"Name": "Section",
"text": "Project",
"checked": false,
"items": [
{
"Name": "Tab",
"text": "Matrix",
"checked": true,
"items": [
{
"Name": "Grid",
"text": "Matrix Grid",
"checked": true,
"items": [
]
}
]
},
{
"Name": "Tab",
"text": "Strategy",
"checked": true,
"items": [
{
"Name": "Grid",
"text": "Strategy Grid",
"checked": true,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": true,
"items": [
{
"Name": "Output",
"text": "Project Tactic Linkage",
"checked": true,
"items": [
]
},
{
"Name": "Output",
"text": "OGTM",
"checked": true,
"items": [
]
}
]
}
]
},
{
"Name": "Tab",
"text": "Risk",
"checked": false,
"items": [
{
"Name": "Grid",
"text": "Risk Grid",
"checked": false,
"items": [
]
},
{
"Name": "Outputs",
"text": "Outputs",
"checked": true,
"items": [
{
"Name": "Output",
"text": "Risk Charts",
"checked": true,
"items": [
]
}
]
}
]
}
]
}
]
Although my data source is correct. What thing is missing in it? I am not getting any error. My tree is not rendering in html.
Try placing your data in a new kendo.data.HierarchicalDataSource

How to loop a JSON

I am getting JSON via ajax like this
{
"questionTypes": [
{
"id": 1,
"name": "text",
"deleted": false,
"version": 0
},
{
"id": 2,
"name": "rating",
"deleted": false,
"version": 0
},
{
"id": 3,
"name": "boolean",
"deleted": false,
"version": 0
},
{
"id": 4,
"name": "option",
"deleted": false,
"version": 0
}
],
"data": [
{
"id": 1,
"category": "default",
"question": "Staff Courtesy",
"deleted": false,
"version": 0
},
{
"id": 2,
"category": "default",
"question": "Staff Response",
"deleted": false,
"version": 0
},
{
"id": 3,
"category": "default",
"question": "Check In",
"deleted": false,
"version": 0
},
{
"id": 4,
"category": "default",
"question": "Check Out",
"deleted": false,
"version": 0
},
{
"id": 5,
"category": "default",
"question": "Travel Desk",
"deleted": false,
"version": 0
},
{
"id": 6,
"category": "default",
"question": "Door Man",
"deleted": false,
"version": 0
},
{
"id": 14,
"category": "client",
"question": "test question",
"deleted": false,
"version": 0
},
{
"id": 15,
"category": "client",
"question": "test1",
"deleted": false,
"version": 0
},
{
"id": 16,
"category": "client",
"question": "test2",
"deleted": false,
"version": 0
},
{
"id": 17,
"category": "client",
"question": "test2",
"deleted": false,
"version": 0
},
{
"id": 21,
"category": "client",
"question": "ggggg",
"deleted": false,
"version": 0
}
]
}
I want to get the name fields from
"questionTypes": [
{
"id": 1,
"name": "text",
"deleted": false,
"version": 0
},
{
"id": 2,
"name": "rating",
"deleted": false,
"version": 0
},
{
"id": 3,
"name": "boolean",
"deleted": false,
"version": 0
},
{
"id": 4,
"name": "option",
"deleted": false,
"version": 0
}
],
$.each(data1.data.questionTypes, function(index, currPat) {
console.log(currPat.name); }
but it did not work ,I get undefined in console.Can any body tell me how to loop exactly
Demo Fiddle
jQuery
$.each(json.data, function (index, currPat) {
$(tbody).append('<tr><td><b>Question from data: ' + currPat.question + '</b></td><td><b>Names from questionTypes</b><select class="qType"></select></td></tr>');
});
var select = $('.qType');
$(json.questionTypes).each(function (index, currPat) {
$(select).append('<option>' + currPat.name + '</option>');
});
You must loop twice: Once for getting the question and then for getting name.
OK, you can do this ,
$(jsonObject.questionTypes).each(function(i,value){
//get value here using value.name
alert(value.name);
});
And the problem was you were actually extracting questionTypes from datawhich is non existent there.
Fiddle Demo
data has no questionTypes
$.each(data1.questionTypes, function(index, currPat) {
alert(currPat.name);
});
in your code I don't see any username properties,
try to use this code.
$.each(data1.data.questionTypes, function(index, currPat) {
console.log(currPat.name); }
Try this
$.each(json.questionTypes, function (index, currPat) {
div=$('<div/>').text(currPat.name);
$('#jsoncontainter').append(div);
});
http://jsfiddle.net/ardeezstyle/497Tx/1/
For your second part of the problem, here is a solution.
$.each(json.data, function (index, currQuest) {
question=$('<div/>',{'class':'question'}).text(currQuest.question);
answer=$('<div/>',{'class':'answer'});
dropdown=$('<select/>');
$.each(json.questionTypes, function (index, currPat) {
option=$('<option/>').text(currPat.name).appendTo(dropdown);
});
answer.append(dropdown);
$('#jsoncontainter').append(question).append(answer);
});
Fiddle

Categories

Resources