I've built some new Ace Editor Modes for my custom language (JMS Message representations) with a sophisticated state machine. Now it would be great to reuse that syntax highlighting also to create the errors. Is that possible ?
In other words, let's say my syntax highlighting creates 'invalid' tokens and I want to use the line number of that token to flag an error and then do something like this: https://github.com/ajaxorg/ace/wiki/Syntax-validation
The simplest format is the HEX format:
this.$rules = {
"start": [
{ regex: /[!#].*$/, token: "comment" },
{ regex: /^0x[0-9a-f]+:/, token: "constant" }, // hex offset
{ regex: /(?:[0-9a-fA-F]{4} |[0-9a-fA-F]{2} )/, token: "constant.numeric" }, // hex value
{ regex: /[\S ]{1,16}$/, token: "string" }, // printable value
{ regex: "\\s+", token: "text" },
{ defaultToken: "invalid" }
]
};
And let's say the editor created this state with an invalid token in line 4:
Is there a (preferably easy) way to get to the line numbers of my invalid tokens ? Or to reuse my $rules state machine for syntax checking ?
Found it - I must admin, Ace Editor is really good stuff. Always works as expected.
What works for me, after computing the tokens of the document with the rules state machine, I iterate through all tokens and find the once that are 'invalid' and then set annotations on those lines. Initially simply 'Syntax error' but different types of 'invalid' could mean different things in the future. This way I only have to write the validation syntax validation once.
aceEditor.session.on('change', function(delta) {
var sess = aceEditor.session;
sess.clearAnnotations();
var invalids = [];
for( var row=0;row<sess.getLength();row++ ) {
var tokens = sess.getTokens(row);
if( !tokens ) continue;
for( var t=0;t<tokens.length;t++ ) {
if( tokens[t].type==="invalid" ) {
invalids.push({ row: row, column: 0, text: "Syntax error", type: "error" });
}
}
}
sess.setAnnotations( invalids );
});
There might be a smarter way to do this (maybe an onToken(type,row,column) function somewhere ?), but above works for me.
Related
I have this example where I am locating a matching string via regex and changing the styles using highlight rules.
this.$rules = {
start: [{
token: 'variableRef',
regex: /\$variable\..+\$/
}]
};
and alter the color using a css class:
.ace_variableRef {
color: red;
}
But what I would really like to do is change the text that is being displayed from $variable.1.name$ to the "resolved value". I have access to:
var variables = {
1: 'timeout'
};
so I can use the reference path to get the value, but is it even possible to do this with ace-editor?
Ideally I would display the string in the user friendly way, but keep the original reference value handy (in metadata or something) since that is what is actually stored in the db.
You can accomplish this by defining a custom onMatch for your rule, like so
this.$rules = {
start: [{
onMatch: function(value, state, stack) {
var values = this.splitRegex.exec(value);
return [{
type: 'variableRef',
value: variables[values[1]]
}]
},
regex: /\$variable\.(\d+).+\$/
}]
};
but the actual text will remain unaltered (thus causing oddities with text selection/cursor), so you'll need to pad/clip the resulting value for it to match length of values[0]
I am using semantic ui and am trying to do some form validation with it.
The scenario I have is the user has 2 options: email,or phone app verrifcation. They select one of the options and enter whatever in a text field then click submit.
However I am not sure how to do rules on this with semantic UI.
I know if I wanted to check if it was blank I could do something like this:
$('.ui.form')
.form({
fields: {
CODE: {
identifier: 'code',
rules: [
{
type : 'empty',
prompt : 'Please enter your verification code'
}
]
}
} } );
However I would like additional rules based upon which option is selected. I have javascript that currently tells me the value of what is selected, and is updated on change. Unsure how to add it into the rules though, so that I can be like -- If phone was select, must be exactly 6 chars long, or IF email was selected, must be 18 chars long (different lengths for different option).
Is there a way to have conditional rules like this? Closet I could find was:
depends: 'id'
Which checks to ensure it is not empty.
Does anyone know how to have conditional rules such as this based on another form element? I am using the most recent version of Semantic-UI
You can do so by adding custom rules.
$.fn.form.settings.rules.atLeastOne = function (value, fields) {
fieldsToCompare = fields.split(",")
if (value) {
// current input is not empty
return true
} else {
// check the other input field(s)
// atLeastOne is not empty
atLeastOne = false
for (i = 0; i < fieldsToCompare.length; i++) {
// gets input based on id
if ($("#" + fieldsToCompare[i]).val()) {
atLeastOne = true
}
}
return atLeastOne
}
}
$(".ui.form").form({
fields: {
number:{
identifier: "number",
rules: [{
type: "exactLength[6]",
prompt: "number has to be 6 chars long"
}, {
// include the input fields to check atLeastOne[email, address, ...]
type: "atLeastOne[email]",
prompt: "Please provide an email or a number"
}]
},
email: {
identifier: "email",
rules: [{
type: "exactLength[18]",
prompt: "email has to be 18 chars long"
}, {
type: "atLeastOne[number]",
prompt: "Please provide an email or a number"
}]
}
}
});
Note that the function uses the input id as the identifier and not the input name. You might also want to look at optional fields.
I'm sorry if this is a duplicate question but I do not understand the answers of other people. I'm using Twitter Bootstrap Ajax Typeahead Plugin (https://github.com/biggora/bootstrap-ajax-typeahead/) to search emails from data that comes from an SQL query. This is the code I use with a php file, where I use people's emails as valueField and people's names as displayField and it works well.
inputSearch.typeahead({
ajax: {
url: urlAjax + '?requete=rechercheannuaire',
displayField: "description",
valueField: "id",
triggerLength: 2,
method: "get",
loadingClass: "loading-circle",
preProcess: function(data){
if(data.type === "error")
{
return false;
}
return data.datas;
}
},
onSelect: function(data){
//alert("assez tot");
data.text = data.value;
//console.log(data);
$("#chercherinvite").val(data.text);
return data;
}
});
The problem is that I have to be able to search "Dujardin" as well as "Du Jardin" and I cannot find a way to assign multiple values to displayField. If someone could explain how typeahead works, I'd be thankfull, I don't understand the documentation.
According to the plugin documentation, you cannot assign multiple values to the displayField option. However, it is possible for you to re-write events.
After a quick lookup into the source code of bootstrap-ajax-typeahead, we can figure out that the "matcher" event is used as the filter for displaying - or not - values to the user.
To allow to match both "Du jardin" and "Dujardin", we have to manipulate strings. Here, I suggest you to :
Remove any diacritic character
Remove any non-word character (all except [A-Za-z0-9_])
Remove any underscore
Set the string to lowercase
To do #1, I suggest you to use this fantastic script by rdllopes.
I wrote a POC. Here is the JSON source (called "source.json"):
[
{ "id": 1, "name": "jdupont#example.com - Jean Du Pont"},
{ "id": 2, "name": "jdupont2#example.com - Jean Dupont"},
{ "id": 3, "name": "jdupont3#example.com - Jéan Dupônt"},
{ "id": 4, "name": "mbridge#example.com - Michel Bridge"}
]
And here is the script that I used for matching elements :
$('#search').typeahead({
// Our source is a simple JSON file
ajax: 'source.json',
// Display field is a list of names
displayField: 'name',
// And value field a list of IDs
valueField: 'id',
matcher: function(item)
{
// For both needle and haystack, we :
// 1. Remove any diacritic character
// 2. Remove any non-word character (all except [A-Za-z0-9_])
// 3. Remove any underscore
// 4. Set the string to lowercase
var needle = removeDiacritics(this.query).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();
var haystack = removeDiacritics(item).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();
// Does the needle exists in haystack?
return ~haystack.indexOf(needle);
}
});
New to sublime text and trying to setup some completions as I have a bunch of snippets and I'd rather just use 1 file, instead of separate files for each snippet.
When I save the below code, I get the error that it can't parse the file, unexpected newline. I'd assume it's because I'm using linebreaks. Are completions only for short 1 line code? Is there anything that can be done so I don't have to use individual files for snippets when I have longer code like below?
{
"completions":
[
{ "trigger": "clearforms", "contents":
"//clear form fields
\$(function() {
\$.fn.clearInput = function() {
return this.focus(function() {
if( this.value == this.defaultValue ) {
this.value = "";
}
}).blur(function() {
if( !this.value.length ) {
this.value = this.defaultValue;
}
});
};
\$('#subscribe').clearInput();
\$('#search').clearInput();
});"
}
]
}
JSON does not allow multi-line strings - the line breaks need to be encoded as \n. The $ symbol needs to be double-escaped like so \\$, and your comment forward slashes single-escaped like so - \/\/. So, your completions file needs to look like this:
{
"completions":
[
{ "trigger": "clearforms", "contents": "\/\/ clear forms \n\\$(function() { \n\\$.fn.clearInput = function() { \nreturn this.focus(function() { \nif( this.value == this.defaultValue ) { \nthis.value = \"\"; \n} \n}).blur(function() { \nif( !this.value.length ) { \nthis.value = this.defaultValue; \n} \n}); \n}; \n\n\\$('#subscribe').clearInput(); \n\\$('#search').clearInput(); \n});" }
]
}
I'll leave it up to you to put in the appropriate whitespace after each line break. I should note that while it may be slightly more "clutter-y" to have individual snippet files, they do allow multi-line entries with no newline escaping needed, allowing you to format your output more easily. However, the $ and possibly the JS comments might need escapes.
We have a rule that all of our validation messages must be in a summary, and thus the default "this field is required" doesn't cut it because the messages lose their context in a summary and therefore need specific field indicators.
I have a solution that I like rather well, but it soon became clear that there was a need for messages outside of just the required field (email, url, custom methods like phoneUS, etc), so I made some additions to my function.
I've been using jQuery for a while, but I'm not an expert in the optimization area, so I wanted to get some expert help on whether the function below could be optimized...my question is, "is there actually a better way to handle custom error messages in a summary?"
$('.required, .email').each(function(index) {
var $this = $(this);
var label = (
$this.is(':radio')
? $("label[data-name='"+$this.attr('name')+"']")
: label = $("label[for='"+$this.attr('id')+"']")
);
var customMessages = [{}];
if($this.hasClass('required')){
customMessages.required = "'" + label.text() + "' is required.";
}
if($this.hasClass('email')){
customMessages.email = "'" + label.text() + "' has an invalid email address.";
}
$this.rules("add", {
messages: customMessages
});
});
Here is the jsFiddle:
http://jsfiddle.net/GD5nw/1/
So why not just assign the custom message on a field-by-field basis for each field as is most typically done? It seems less verbose than what you've been doing.
http://docs.jquery.com/Plugins/Validation/validate#toptions
Example for input elements with name attribute assigned as first, second, and address.
$('#myform').validate({
rules: {
first: {
required: true
},
second: {
required: true
},
address: {
required: true,
digits: true // just an example
}
},
messages: {
first: {
required: "your first name is required"
},
second: {
required: "your last name is required"
},
address: {
required: "your address is required",
digits: "must only use digits on address"
}
}
});
Working Demo: http://jsfiddle.net/x4YBw/