mustache doesn't render any nested objects in the row - multidimensional-array

I'm trying to render an object with nested docs. The problem is it's only displaying entries from r.lang.x and not r.offerHistorys.offerHistory.x but the row is rendered just empty but for the lang values.
http://jsfiddle.net/Hy6yn/83/
mustache.js 2.2
Mustache.to_html(this.templates.openRequest, r, this.templates.partials);
log r (data passed to template)
{
"header":{
"index":"/shiftadmin/_design/shifts/_list/index/shifts?descending=true&limit=10",
"appTitle":"Shift-Admin-Open-Requests"
},
"scripts":{
},
"lang":{
"prio":"priority",
"incentive":"incentive",
"stat":"stat",
"yourOffers":"yourOffers",
"yourReqs":"yourReqs",
"offerHistory":"offerHistory",
"pageTitle":"pageTitle"
},
"offerHistorys":[
{
"offerHistory":{
"_id":"83c6a87147479fe3408a3d951d032106",
"_rev":"11-d34b8b430e221a3dff5d73f6a1420e40",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d001aa2"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":null,
"status":"requested",
"idTarget":6,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d001aa2",
"_rev":"8-a98d5b16296cc7d325210b58303ee2eb",
"cat":"test",
"title":"2 server test",
"idUser":2,
"idQualification":16,
"idSection":1,
"type":"shift",
"start":"2016-11-20 14:00 +02:00",
"end":"2016-11-20 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
},
{
"offerHistory":{
"_id":"83c6a87147479fe3408a3d951d032457",
"_rev":"9-72942be560e22b3788afcaa5a85c2fa3",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d002c7q"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":5,
"status":"requested",
"idTarget":5,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d002c7q",
"_rev":"8-1bb6b9a995b7db3b1af5802a23dd5efc",
"cat":"test",
"title":"3 server test",
"idUser":3,
"idQualification":16,
"idSection":2,
"type":"shift",
"start":"2016-11-21 14:00 +02:00",
"end":"2016-11-21 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
}
]
}
templates/openRequest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ pageTitle }}</title>
</head>
<body>
<div class="col-md-2 col-xs-0"></div>
<div class="col-md-8" id="historyCont">
<h1>{{lang.offerHistory}}T</h1>
<div class="tabs row">
<button class="btn bg-info active"
type="button"
onclick="showHistory('offers')">{{lang.yourOffers}}
</button>
<button class="btn bg-info"
type="button"
onclick="showHistory(reqs)">{{lang.yourReqs}}
</button>
</div>
<div id="tblOfferHist"></div>
<div id="tblReqHist"></div>
</div>
{{#offerHistorys}}
{{>offerHistory}}
{{/offerHistorys}}
</body>
</html>
templates/partials/offerHistory.html
<div class="hand {{gHistoryStat[status].bg}} row" id="historyItem{{_id}}" onclick="togNots(this)">
<span class="glyphicon {{gHistoryStat[status].icon}} col-xs-1 historyIcon" data-toggle="tooltip" data-placement="bottom" title="{{status}}">{{reqBy}}</span>
{{#shift}}
<span class="col-xs-10 historyTxt"><b>{{title}}</b> <span class="right small">{{lang.putInAt}} {{strSent}}</span><br>
{{start}} {{end}}<br>
{{/shift}}
{{shift[0].start}}
{{shift.start}}
{{lang.priority}}: {{lang.prio}} {{prio}}<br>
{{lang.incentives}}: {{money}}<br>
{{lang.stat}}: {{status}}
</span>
</div>

apparently there are limits to nested levels or i had a logic error in my code. I got it to work by using one html template and reducing the nested level in data
var data = {
"header":{
"index":"/shiftadmin/_design/shifts/_list/index/shifts?descending=true&limit=10",
"appTitle":"Shift-Admin-Open-Requests"
},
"scripts":{
},
"lang":{
"prio":"priority",
"incentive":"incentive",
"stat":"Status",
"yourOffers":"yourOffers",
"yourReqs":"yourReqs",
"offerHistory":"offerHistory",
"pageTitle":"pageTitle"
},
"offerHistorys":[
{
"_id":"83c6a87147479fe3408a3d951d032106",
"_rev":"11-d34b8b430e221a3dff5d73f6a1420e40",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d001aa2"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":null,
"status":"requested",
"idTarget":6,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d001aa2",
"_rev":"8-a98d5b16296cc7d325210b58303ee2eb",
"cat":"test",
"title":"2 server test",
"idUser":2,
"idQualification":16,
"idSection":1,
"type":"shift",
"start":"2016-11-20 14:00 +02:00",
"end":"2016-11-20 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
},
{
"_id":"83c6a87147479fe3408a3d951d032457",
"_rev":"9-72942be560e22b3788afcaa5a85c2fa3",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d002c7q"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":5,
"status":"requested",
"idTarget":5,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d002c7q",
"_rev":"8-1bb6b9a995b7db3b1af5802a23dd5efc",
"cat":"test",
"title":"3 server test",
"idUser":3,
"idQualification":16,
"idSection":2,
"type":"shift",
"start":"2016-11-21 14:00 +02:00",
"end":"2016-11-21 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
]
};
var openRequest = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>{{ pageTitle }}</title></head><body><div class="col-md-2 col-xs-0"></div><div class="col-md-8" id="historyCont"><h1>{{lang.offerHistory}}</h1><div class="tabs row"><button class="btn bg-info active" type="button" onclick="showHistory(\'offers\')">{{lang.yourOffers}}</button> <button class="btn bg-info" type="button" onclick="showHistory(reqs)">{{lang.yourReqs}}</button></div><div id="tblOfferHist"></div><div id="tblReqHist"></div></div>{{#offerHistorys}}<div class="hand {{gHistoryStat[status].bg}} row" id="historyItem{{_id}}" onclick="togNots(this)"><span class="glyphicon {{gHistoryStat[status].icon}} col-xs-1 historyIcon" data-toggle="tooltip" data-placement="bottom" title="{{status}}">{{reqBy}}</span>{{#shift}}<span class="col-xs-10 historyTxt"><b>{{title}}</b> <span class="right small">{{lang.putInAt}} {{strSent}}</span><br>{{start}} {{end}}<br>{{/shift}}{{shift[0].start}}{{shift.start}}{{lang.prio}}: {{lang.prio}} {{prio}}<br>{{lang.incentive}}: {{money}}<br>{{lang.stat}}: {{status}}</span></div>{{/offerHistorys}}</body></html>';
$(document).ready(function () {
var html = Mustache.to_html(openRequest, data);
console.log(html)
$("#contenet").html(html)
})

Related

Click a button from a drop-down menu with RSelenium

I have problem. I have to click the line "in codici prodotto".
<div class="row typeahead">
<div class="col-sm-12 cursor typeahead-row" data-ng-class="{'typeahead-row-selected': view.searchSlots[0].selected}" style="margin-bottom:2px" data-ng-mousedown="searchDocs(model.inputheaderlg)"> " 67D16EA#ABZ "
{{model.inputheaderlg | limitTo: 50}} <span data-ng-if="model.inputheaderlg.length >50">...</span> <span style="color:#bbb"> in informazioni</span> <span class="pull-right"><img style="margin-bottom:3px" alt="vai" src="/opencms/opencms/immagini/rifacimento_nuovo_portale/HP/frecciatype.png"></span>
</div>
<div class="col-sm-12 cursor voffset typeahead-row" data-ng-class="{'typeahead-row-selected': view.searchSlots[1].selected}" data-ng-if="showProduct()" data-ng-mousedown="searchProdotti(model.inputheaderlg)"> " 67D16EA#ABZ "
{{model.inputheaderlg | limitTo: 50}} <span data-ng-if="model.inputheaderlg.length >50">...</span> <span style="color:#bbb"> in prodotti</span> <span class="pull-right"><img style="margin-bottom:3px" alt="vai" src="/opencms/opencms/immagini/rifacimento_nuovo_portale/HP/frecciatype.png"></span>
</div>
<div class="col-sm-12 cursor typeahead-row" data-ng-class="{'typeahead-row-selected': view.searchSlots[2].selected}" data-ng-if="showProductCodes()" data-ng-mousedown="searchCodice(model.inputheaderlg)"> " 67D16EA#ABZ "
{{model.inputheaderlg | limitTo: 50}} <span data-ng-if="model.inputheaderlg.length >50">...</span> <span style="color:#bbb"> in codici prodotto</span> <span class="pull-right"><img style="margin-bottom:3px" alt="vai" src="/opencms/opencms/immagini/rifacimento_nuovo_portale/HP/frecciatype.png"</span>
</div>
</div>
I have tried CSS and with XPATH......
#css
webelem4 <- remote_driver$findElement(using = "css",'#headersearchformlg .ng-scope+ .ng-scope span:nth-child(1)')
webelem4$clickElement
#xpath
webelem4 <- remote_driver$findElement(using = "xpath",'//*
[#id="headersearchformlg"]/fieldset/div/div[3]/div/div[3]')
webelem4$clickElement
.....but I always get the same answer.
Class method definition for method clickElement()
function ()
{
"Click the element."
qpath <- sprintf("%s/session/%s/element/%s/click",
serverURL, sessionInfo[["id"]], elementId)
queryRD(qpath, "POST")
}
<environment: 0x00000248bd0ad708>
Methods used:
"queryRD"

get id from datatable and show his results into a modal ASP SQL

I have a datatable in an aspx page connected to an mssql database, I added a column with a button to open the modal in which I would like to show the results for the selected record. How do I pass the record id and run a sql query to show the fields that interest me?
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#dt1').DataTable({
"processing" : true,
"ajax" : {
"url" : "selectbasic.aspx",
dataSrc : ''
},
"columns" : [
{
"data": "ID",
},
{
"data" : "Name"
},
{
"data" : "Email"
},
{
"data" : "Address"
}, {
"data" : "UserType",
"render": function(data, type, row, meta){
if(type === 'display'){
if(data=="0"){
data="NO";
}else
{
data="SI";
}
data = data;
}
return data;
}
},
{ data : 'edit',
render : function(data, type, row) {
return '<center><a data-toggle="modal" data-target="#modaldetails"><i class="glyphicon glyphicon-edit"></i></a></center>'
}
},
]
});
</script>
<div class="modal fade" id="modaldetails" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" style="z-index: 100;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLongTitle">Edit</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
"show results here where ID=...."
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In practice I would like to do what with php & mysql is done using $ _GET ['ID'] and mysql_fetch_assoc (), but in asp & mssql. Thank you
Do something like this:
$('#YourTable tbody').on( 'click', 'a', function () {
var data = '';
data = YourTable.row( $(this).parents('tr') ).data();
//to do this your table need to be declared like this
//yourTable= $('#YourTable').DataTable();
console.log(data);
var carId= data['id'];
console.log(carId);
})
if you have any issue check this post where i answered something similar JQ event didnt active on the extract row sort by datatable.js

Display User Data with React/Meteor Application

I have been trying various methods to display data from a Meteor fetch within a React template. I don't fully understand why this is so hard to do.
When I use getMeteorData within the template it doesn't display the data when using {this.data.user._id}
getMeteorData() {
return {
user: Meteor.user()
};
},
This is the same story when using componentDidMount.
I have followed the react & meteor tutorial on the meteor website and they use props. This however feels a lot of work for simply pulling and fetching data.
This is an example of an attempt
export var MenuLoggedIn = React.createClass({
displayName: 'MenuLoggedIn',
mixins: [
Router.State, Router.Navigation
],
getMeteorData() {
return {
user: Meteor.user()
};
},
getInitialState(){
return {
avatarImagePreview: null,
avatarImage: null
};
},
render: function() {
return (
<div className="container">
<div className="menu-structure col-md-12">
{this.data.user._id}
<div className="left-menu pull-left">
<img className="logo" src="/img/logo.png"/>
<h1 className="eventburger-title">eventburger</h1>
</div>
<div className="right-menu">
<div className="search-bar">
<i className="fa fa-search"></i>
<input type="text" name="Search" placeholder="Harpist, Photographer, Caterer..."/>
</div>
{this.data
? <img src="/img/avatar.png"/>
: <img src="/img/placeholder-person.jpg"/>}
<span>{this.data}
Feeney</span>
<a href="/app/inbox">
<i className="fa fa-envelope"></i>
</a>
<a className="head-spacing" href="#" onClick={this.logout}>LOG OUT</a>
</div>
</div>
</div>
);
},
logout: function(e) {
e.preventDefault();
Meteor.logout();
window.location.href = "/login"; //Need to be moved to History
}
});
You need to use the ReactMeteorData mixin to make getMeteorData() work.
mixins: [
Router.State, Router.Navigation, ReactMeteorData
],
https://atmospherejs.com/meteor/react-meteor-data

Autoform: How to dynamically show and add fields of a sub-schema depending on another field?

What is the best approach to dynamically show fields of a sub-schema (Object) depending on another field?
In the following example a document (Schemas.Main) can include several items defined in Schemas.Items. The fields that are needed to fill in items are dependendent on the selected type.
For example if a user selects type=="type1", fields "type1_field1" and "type1_field2" need to be filled.
A solution probably needs to use autoForm and combine AutoForm.getFieldValue and setting fields of an afArrayField, correct? I have tried a lot of combinations but either the ability to add additional items is lost (missing plus-sign) or I cannot add different items (i.e. all items are type1). Any hints how to solve this?
//Schemas.js
Schemas = {}; Collections = {};
Main = Collections.Main = new Mongo.Collection("Main");
Main.attachSchema(Schemas.Main);
Meteor.isClient && Template.registerHelper("Schemas", Schemas);
Schemas.Main = new SimpleSchema({
name: {
type: String
},
items: {
type: [Schemas.Items]
}
});
Schemas.Items = new SimpleSchema({
type: { //FormActions...
type: String,
allowedValues: ['type1', 'type2', 'type3'],
autoform: {
type: "selectize"
}
},
type1_field1: {
type: String
},
type1_field2: {
type: String
},
type2_field1: {
type: String
},
type2_field2: {
type: String
},
type3_field1: {
type: String
},
type3_field2: {
type: String
}
});
//form.html
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
{{> afFieldInput name='name'}}
{{> afArrayField name='items' fields="items.$.type, items.$.type1_field1"}} //How to set these fields dynamically depending on type?
<div class="form-group">
<button type="submit" class="btn btn-primary">Create</button>
</div>
{{/autoForm}}
I finally used another approach and created an own template based on afArrayField, which uses
{{> UI.dynamic template=currentFieldValue}}
Not sure if this is the best approach but seems to be working for my situation:
Template.registerHelper("currentFieldValue", function() {
return AutoForm.getFieldValue("testForm", this.current.type) || "no type so far";
});
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
{{> afFieldInput name='name'}}
{{> afArrayField name='items' id="something" template="mycustom"}}
<div class="form-group">
<button type="submit" class="btn btn-primary">Create</button>
</div>
{{/autoForm}}
<template name="afArrayField_mycustom">
<div class="panel panel-default">
<div class="panel-heading">{{afFieldLabelText name=this.atts.name}}</div>
{{#if afFieldIsInvalid name=this.atts.name}}
<div class="panel-body has-error">
<span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
</div>
{{/if}}
<ul class="list-group">
{{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item autoform-array-item">
<div>
<div class="autoform-remove-item-wrap">
{{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
<button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span>
</button>
{{/if}}
</div>
<div class="autoform-array-item-body">
<!--all actions have a type -->
{{> afFieldInput name=this.current.type label=false options="auto"}}
<!--branch here for other fields that depend on type -->
{{> UI.dynamic template=currentFieldValue}}
</div>
</div>
</li>
{{/afEachArrayItem}}
{{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item">
<button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span>
</button>
</li>
{{/if}}
</ul>
</div>
</template>
<template name="type1">
<!--include type1 fields here-->
</template>
<template name="type2">
<!--include type2 fields here-->
</template>
<template name="type3">
<!--include type3 fields here-->
</template>
Based on Miriam's answer, I would also like to share what i did to get things working. May be it could benifit.
Schemas -> actions
Schemas.actions = new SimpleSchema({
actions : {
type : Array,
optional: false,
minCount: 1,
autoform: {
name: "actions"
}
},
"actions.$" : {
type: Object
},
"actions.$.action_type": {
type : String,
optional: false,
label : "Action Type",
autoform: {
type : "select",
class : "action_type form-control",
name : "action_type",
label : "Select type of action",
options: function()
{
let returnValue = [
{label: "Action 1", value: "action_1"},
{label: "Action 2", value: "action_2"},
];
return returnValue;
}
}
},
"actions.$.action_1" : {
type : Schemas.action1,
minCount: 1,
optional: true,
label : "Action 1",
}
});
Schemas -> action1
Schemas.action1 = new SimpleSchema({
"action1_to" : {
type : String,
optional: false,
label : "Email To",
autoform: {
type : "text",
label : "Email To",
placeholder: "Comma seperated values...",
class : "form-control"
}
},
"action1_cc" : {
type : String,
optional: true,
label : "Email Cc",
autoform: {
type : "text",
label : "Email Cc",
placeholder: "Comma seperated values...",
class : "form-control"
}
},
"action1_subject": {
type : String,
optional: false,
label : "Subject",
autoform: {
type : "text",
label : "Subject",
placeholder: "Subject for the Email",
class : "form-control"
}
},
"action1_body" : {
type : String,
optional: false,
label : "Email Content",
autoform: {
label : "Email Content",
rows : 6,
class : "form-control auto-size",
placeholder: "Email Content goes here...",
style : "font-size: 120%;"
}
}
});
Please note that Schemas.action1 should be loaded before Schemas.actions else you would only have a textbox rendered instead of the form
Templates
<template name="actions">
{{#autoForm id="actions-form" doc=step.data schema=schema}}
{{> afArrayField name="actions" template="actions" step=step}}
{{> wizardButtons}}
{{/autoForm}}
</template>
<template name="afArrayField_actions">
<div class="panel panel-default">
<div class="panel-heading">{{afFieldLabelText name=this.atts.name}}</div>
{{#if afFieldIsInvalid name=this.atts.name}}
<div class="panel-body has-error">
<span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
</div>
{{/if}}
<ul class="list-group">
{{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item autoform-array-item">
<div>
<div class="autoform-remove-item-wrap">
{{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
<button type="button" class="btn btn-primary autoform-remove-item"><span
class="glyphicon glyphicon-minus"></span></button>
{{/if}}
</div>
<div class="autoform-array-item-body">
{{> afQuickField name=this.current.action_type label=false options=actionOptions}}
{{> UI.dynamic template=currentFieldValue data=this }}
</div>
</div>
</li>
{{/afEachArrayItem}}
{{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<li class="list-group-item">
<button type="button" class="btn btn-primary autoform-add-item"
data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}"
data-autoform-maxCount="{{this.atts.maxCount}}"><span
class="glyphicon glyphicon-plus"></span></button>
</li>
{{/if}}
</ul>
</div>
</template>
<template name="action_1">
{{> afQuickField name=this.current.action_1 }}
</template>
You would see {{> wizardButtons}} in the template which is because I am using the form-wizard package
and a Template.registerHelper for currentFieldValue helper
Template.registerHelper("currentFieldValue", function()
{
let val = AutoForm.getFieldValue(this.current.action_type, "actions-form");
return val || null;
});
Hope this helps some-one and saves time.
Thanks Mariam for this solution

Adding errors to form validation doesn't work?

According to the Semantic UI docs on form validation, I can add errors manually:
add errors(errors) | Adds errors to form, given an array errors
(I want to use this feature because I submit my form via AJAX, do server-side validation, then want to display the results.)
I tried the following code:
$('#my-form').form("add errors", [ 'error' ]);
$('#my-form').form("validate form");
I get this contradictory output from the console when calling the above methods, and the form validates as successful when it obviously shouldn't.
Any idea?
To perform server-side validation via AJAX, use a custom rule:
$myForm = $('.ui.form');
var settings = {
rules: {
custom: function () {
// Perform AJAX validation here
return false;
}
}
};
var rules = {
ajaxField: {
identifier: 'ajaxField',
rules: [{
type: 'custom',
prompt: 'Custom error!'
}]
}
};
$myForm.form(rules, settings);
Here it is in action: http://jsbin.com/sufiwafe/1/edit
For how to use callbacks and form validation in general, there is an important discussion on the Semantic-UI issues page on GitHub. The author mentions:
... the documentation was ambiguous but validation + settings is passed
like $(".form').form(rules, settings);
It appears like you are trying to recreate the wheel when using semantic ui.
Assuming you have included the complete versions of semantic.css in the head and semantic.js just above the body closing tag, here is an abbreviated version of working code for a simple contact form with some of the error work done by semantic and some by html5. For completeness I have included a user side captcha.
HTML
<form class="ui form" name="contact_sdta" action="" method="post">
<div class="field">
<label>Your Email </label>
<div class="ui left labeled icon input">
<input name="email" id="email" placeholder="name#mail.com" type="email">
<i class="mail icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="field">
<label>Subject</label>
<div class="ui left labeled icon input">
<input name="subject" id="subject" placeholder="I am interested in more information about" type="text">
<i class="text file outline icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="field">
<label>Message</label>
<div class="ui left labeled icon input">
<textarea name="message"></textarea>
<i class="text file outline icon"></i>
<div class="ui corner label">
<i class="asterisk red icon"></i>
</div>
</div>
</div>
<div class="ui buttons">
<input type="reset" value="Cancel" class="ui button">
<div class="or"></div>
<input type="submit" value="Submit" class="ui blue submit button">
</div>
<div class="ui error message"></div>
</form>
mainjs
$(function(){
$('form input[type=reset]')
.before('<div>Are you a human? <input type="checkbox" name="captcha" /><i class="asterisk red icon"></i></div><br />');
$('.ui.form').form({
email: {
identifier: 'email',
rules: [
{
type: 'empty',
prompt: 'Please enter your email'
}
]
},
subject: {
identifier: 'subject',
rules: [
{
type: 'empty',
prompt: 'Please enter a subject'
}
]
},
message: {
identifier: 'message',
rules: [
{
type: 'empty',
prompt: 'Please enter a message'
}
]
},
human: {
identifier: 'captcha',
rules: [
{
type: 'checked',
prompt: 'You must behuman'
}
]
}
});
});
I hope this helps to clear things up.
The developer confirmed this was a bug on GitHub:
https://github.com/Semantic-Org/Semantic-UI/issues/959
MVC5: Try Add this in the lowermost part of your View
#section Scripts {
#Scripts.Render("~/bundles/jqueryval") }

Resources