We Keep Coding

Why won't Meteor autoForm afQuickField Errors display on error?

In our Meteor v1.11.1 application, we are using Bootstrap 3, aldeed:autoform#6.3.0, and aldeed:collection2#3.2.1 in blaze to validate forms. We really want to implement the "least-custom" solution to display and validate our form inputs.
We can't wrap our heads around why even the most basic error message doesn't appear in the form when we submit? We narrowed the form down to one field and a submit. The HTML elements are in the DOM, but no hint of messaging appears upon validation.
The schema for the form is:
Folios = new Mongo.Collection('Folios')
FolioSchema = new SimpleSchema({
"name": {
"type": String,
"min": 2,
"required": true
}
},
{
"requiredByDefault": false,
"clean": {
"filter": true,
"autoconvert": true,
"removeEmptyStrings": true,
"trimStrings": true,
"getAutoValues": true,
"removeNullsFromArrays": true
}
}
Folios.attachSchema(FolioSchema)
The form is:
{{# autoForm id="newFolio"
class="newFolioForm"
collection=getFormCollection
schema=getFormSchema
type=getFormType
validation="submitThenBlur"
resetOnSuccess=true
}}
{{> afQuickField name='name' type='text' }}
<button type="submit">Submit</button>
{{/ autoForm }}
And the helpers for collection, schema, and type are:
Template.newFolioForm.helpers({
getFormCollection()
{
return Folios
},
getFormSchema()
{
return FolioSchema
},
getFormType()
{
return "insert"
}
})
When I click submit, no error message, no error class, nothin'. We've consulted simpl-schema docs. We want to avoid the need to implement afMessage as a part of a fully custom form just to get a message and validation error to display properly.
I thought to check here first. Thank you!

The issue comes from the missing Tracker that is required in order to generate reactive validation messages:
import { Tracker } from 'meteor/tracker'
FolioSchema = new SimpleSchema({
'name': {
'type': String,
'min': 2,
'required': true
}
},
{
'requiredByDefault': false,
'clean': {
'filter': true,
'autoconvert': true,
'removeEmptyStrings': true,
'trimStrings': true,
'getAutoValues': true,
'removeNullsFromArrays': true
},
tracker: Tracker // this line is important
})
Without passing the Tracker, there is no cause for the template to redraw, since there is no dependency resolved.
Readings: https://github.com/aldeed/simpl-schema#enable-meteor-tracker-reactivity

Ext.Defer gives getAsynchronousLoad Error

I've just defined a combobox. Firstly it loads a countrylist and when select a value it's fire a change event which doing a ajax query to DB within searching service;
The thing; this configuration works pretty well when I click and open combobox items. But when I'm typing to combobox's field it's fires listener's store.load and because of none of country selected yet, the search query url gives not found errors of course.
{
xtype: 'countrycombo',
itemId: 'countryName',
name:'country',
afterLabelTextTpl: MyApp.Globals.required,
allowBlank: false,
flex: 1,
// forceSelection: false,
// typeAhead: true,
// typeAheadDelay: 50,
store: {
proxy: {
type: 'ajax',
// isSynchronous: true,
url: MyApp.Globals.getUrl() + '/country/list?limit=250',
// timeout: 300000,
reader: {
type: 'json',
rootProperty: 'data'
}
},
pageSize: 0,
sorters: 'description',
autoLoad: true
}
,
listeners: {
change: function (combo, countryId) {
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy()
.setUrl(MyAppp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
// Ext.defer(cityStore.load, 100);
cityStore.load();
}
}
},
I've tried several things as you see in code above to set a delay/timeout for load during typing to combobox text field; Ext.defer, timeoutconfig on proxy, typeAhead config on combo but none of them worked!
I thought that Ext.defer is the best solution but it gives this error:
Uncaught TypeError: me.getAsynchronousLoad is not a function at load (ProxyStore.js?_dc=15169)
How can I set a delay/timeout to combobox to fires load function?

Instead of Ext.defer(cityStore.load, 100);
try using this :
Ext.defer(function(){
cityStore.load
}, 300);
If this doest work, try increasing your delay
or you can put a logic before loading
like this :
if(countryId.length == 5){
cityStore.load
}
This will ensure that you Entered the right values before loading
Hope this helps, and Goodluck on your project

well.. I've tried to implement #Leroy's advice but somehow Ext.defer did not fire cityStore.load. So I keep examine similar situations on google and found Ext.util.DelayedTask
So configured the listerens's change to this and it's works pretty well;
listeners: {
change: function (combo, countryId) {
var alert = new Ext.util.DelayedTask(function () {
Ext.Msg.alert('Info!', 'Please select a country');
});
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy().setUrl(MyApp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
if (typeof countryId === 'number') {
cityStore.load();
} else {
alert.delay(8000);
}
}
}

Select2 dropdown allow new values by user when user types

The select2 component can be configured to accept new values, as ask in Select2 dropdown but allow new values by user?
And you can see it at: http://jsfiddle.net/pHSdP/646/ the code is as below:
$("#tags").select2({
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: false,
data: [{
id: 0,
text: 'story'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'task'
}]
});
The problem is that the new value is only added to the list if you enter new value and press enter, or press tab.
Is it possible to set the select2 component to accept this new value when use types and leave the select2. (Just as normal html input tag which keeps the value which you are typing when you leave it by clicking some where on the screen)
I found that the select2 has select2-blur event but I don't find a way to get this new value and add it to list?!

Adding attribute selectOnBlur: true, seems to work for me.
Edit: glad it worked for you as well!

I am using Select2 4.0.3 and had to add two options:
tags: true,
selectOnBlur: true,
This worked for me

And to be able to submit multiple new choices together with the existing ones:
select2({tags: true, selectOnBlur: true, multiple: true})

JQuery Validate is firing both Highlight and Unhighlight in Chrome

I am having a really strange problem with Jquery validate that only occurs in Chrome. The validation on this page seems to be firing both the Highlight and the Unhighlight functions in the .validate() function so if I dont fill out the form it cycles through each element and applies the "invalid" class in the highlight function but then for some reason it goes through and immediately applies the code in unhighlight and I cant work out why?
JS
$(document).ready(function () {
//Validation for form fields on Payment form
/*This adds a method to test whether value is equal to placeholder, and if it is, don't consider it filled out. This is necessary to circumvent IE placeholder plugin*/
jQuery.validator.addMethod("notEqual", function (value, element, param) {
return this.optional(element) || value != param;
}, "Required.");
$('#payment-form').validate({
onfocusout: function (element) {
$(element).valid();
},
rules: {
"data[Payment][card_holder]": { required: true, minlength: 2 },
"data[Payment][card_number]": { required: true, creditcard: true },
"data[User][first_name]": { required: true, notEqual: "First Name" },
"data[User][last_name]": { required: true, notEqual: "Last Name" },
"data[UserDetail][company]": { required: true },
"data[UserDetail][job_title]": { required: true },
"data[UserDetail][telephone]": { required: true },
"data[User][email]": {
required: true,
email: true,
remote: {
url: "/usermgmt/users/email_exists",
type: "post"
}
},
"data[User][password]": { required: true },
"data[Address][billing_line_1]": { required: true },
"data[Address][billing_line_2]": { required: true },
"data[Address][billing_state]": { required: true },
"data[Address][billing_postcode]": { required: true },
credit_exp_month: { required: true, notEqual: "MM", number: true, max: 12, minlength: 2, maxlength: 2 },
credit_exp_year: { required: true, notEqual: "YYYY", number: true, minlength: 2, maxlength: 4 },
"data[Payment][cvv]": { required: true, number: true, minlength: 3, maxlength: 4 },
},
errorClass: 'error',
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
validateIcon(element);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
validateIcon(element);
}
});
function validateIcon(element) {
$(element).siblings('span.validate_icon').remove();
if ($(element).hasClass('error')) {
alert("error");
$(element).closest('li').find('label>span:first').html('<span class="validate_icon invalid"> <span class="icon-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-exclamation"></i></span></span>');
} else if ($(element).hasClass('valid')) {
alert("valid");
$(element).closest('li').find('label>span:first').html('<span class="validate_icon valid"> <span class="icon-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-ok"></i></span></span>');
}
}
});
PHP Code that handles the email exists:
public function email_exists() {
$this->autoRender = false;
if($this->request->is('post')) {
$this->RequestHandler->respondAs('json');
if(!$this->User->findByEmail($this->request->data['User']['email'])) {
echo json_encode(true);
} else {
echo json_encode(false);
}
}
}
I have also tried simply echo "true"; and echo 1; I have tried everything suggested in the comments below but regardless - the problem exists.

I had the exact same problem, and by seeing your code I might say that you have the same cause, but let's break it down.
Checking
First, let's check that my comment is relevant, and I can actually help you. Comment the remote param on your email validation set up:
"data[User][email]": {
required: true,
email: true
},
Is your problem fixed? Great, keep reading (feel free to skip to the fix section).
The problem
1. When the plugin validates, it creates a list of errors, stored into an array called "errorList".
2. Have you ever used the showErrors functionality? It's there to show all the errors, but also to target-show errors. If you want to show specific errors, or to show errors that are out of the limits of the plugin (ej.: a 60s timeout has expired), you can use that method.
3. When showing specific errors, what that method does is to add the specified error(s) to the errorList.
4. The problem is that before adding new errors that list is cleared up (I didn't write the code, but it seems that it's done in order to keep that list nice and clean, and not having two different errors of the same input).
5. Now, when the email is checked remotely we are in the same situation of a timeout. So it uses the showErrors functionality, and that means that the form is validated when click, and some seconds later (with the PHP response), the email error is shown, but clearing up the errorList. That's what is happening.
The fix
If you are not going to do explicit use of showErrors, truth is that you can comment the line where the errorList is cleared up:
showErrors: function( errors ) {
if ( errors ) {
// add items to error list and map
$.extend( this.errorMap, errors );
//this.errorList = [];
for ( var name in errors ) {
...
If you are going to do an explicit use of that method, you can try this version instead. Doesn't clear the error list, but checks that you're not adding the same error twice:
showErrors: function( errors ) {
if ( errors ) {
// add items to error list and map
$.extend( this.errorMap, errors );
for ( var name in errors ) {
var tempElem = this.findByName(name)[0];
this.errorList = jQuery.grep(this.errorList, function( error, i ) {
return error.element != tempElem;
});
this.errorList.push({
message: errors[name],
element: tempElem
});
}
Let me know if worked or you have any problem.

This code of yours can be a problem...
onfocusout: function (element) {
$(element).valid();
},
You cannot put the .valid() method inside of the .validate() method without causing some serious issues.
This is the default onfocusout function from the plugin...
onfocusout: function( element, event ) {
if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
this.element(element);
}
}
What's the purpose of your custom onfocusout function? Generally, it's not needed since the onfocusout trigger is already built into the functionality. One constructs their own onfocusout function only to over-ride the built-in default. So if you want the default onfocusout behavior, just remove the onfocusout option entirely.
If you really want to emulate something like in your code, it would need to look like this...
onfocusout: function(element, event) {
this.element(element);
}
Quote OP Comment:
"as I said im not really sure what good it would do you: (I cant get it to format here..)"
$this->RequestHandler->respondAs('json');
if(!$this->User->findByEmail($this->request->data['User']['email'])) {
return json_encode(true);
} else {
return json_encode(false);
}
It does a lot of good to show any code that could be affecting the problem, especially any code that's wrong. This could have been solved two days ago.
return is for returning to the PHP function that called this one. In other words, return will do nothing here since there is no PHP function to return to. On the other hand, echo will output from PHP... and that's what you need for jQuery Validate remote...
if (....) {
echo true;
} else {
echo false;
}
PHP return versus PHP echo
Also see: https://stackoverflow.com/a/21313309/594235

What is wrong with this javascript?

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.

Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.