Develop Reference

How to show native validation error for specific input on change event?

I have a classic HTML5 form. I would like using jquery/javscript to show the browser native error tooltip when the user change a specific input value. I would like to avoid the user try to submit the form to see all errors.
For that, I tried with the functions checkValidity() and reportValidity() but it works only if I add alert('test'); in my condition...so weird
JS script
myInputJqueryObject.on('change', function() {
if ( !this.checkValidity() ) {
this.setCustomValidity( 'Custom error !!!' );
var $form = $('#my-form');
if( $form[0].checkValidity() === false) {
$form[0].reportValidity();
//alert('test'); <-- works only if I active this line code
return true;
}
}
});

You do not need to check the form validity when you know that the input is invalid. You can omit if( $form[0].checkValidity() === false). Also you can reportValidity on the input itself.
And setCustomValidity takes some time to be applied to the input field. So you have to wrap reportValidity into setTimeout:
$('input').on('change', function() {
var self = this;
if (!self.checkValidity()) {
self.setCustomValidity('Custom error !!!');
setTimeout(function() {
self.reportValidity();
self.setCustomValidity('');
}, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form"><input value="del me" required></form>

Based on 'Kosh Very' answer, I found the solution. It sounds good without bugs.
JS Script :
$('input').on('focusout', function() {
var self = this;
var validity = self.checkValidity();
if( !validity ){
if( self.validity.patternMismatch ){ //<-- Optionnal : Condition to keep others native message errors except Pattern.
self.setCustomValidity( 'Custom Error about pattern!!!' );
}
setTimeout(function() {
self.reportValidity();
self.setCustomValidity( '' ); //<-- Important to reinit
}, 1);
}
});

Adding custom id attribute for img and input elements

I am trying to add a custom id attribute for each img & input elements in ckeditor 3.6.4.
So far I have added dataProcessor.htmlFilter to handle the id attribute like this
CKEDITOR.on( 'instanceReady', function(event) {
var editor = CKEDITOR.instances.editor;
editor.dataProcessor.htmlFilter.addRules(
{
elements: {
$: function (element) {
if ( (element.name == 'img' || element.name == 'input') && CKEDITOR.instances.editor.mode == 'wysiwyg' ) {
if (!element.attributes.id){
var g = createID();
alert('new id: ' + g);
element.attributes.id = g;
}
}
}
}
});
});
and when I add a new textfield in visual editor I do get a new id. But if I set to the source mode the mode is still 'wysiwyg' and not 'source' and it gives a new Id.
How can I prevent the double action?
Did some testing. Added this
CKEDITOR.instances.editor.on('mode', function() {
// Code to execute when the user switches editing modes
alert('Changed to: ' + CKEDITOR.instances.editor.mode);
});
Somehow that fires after the htmlFilter rule.

You can try adding a check for the editor mode to your rule.
if ( (element.name == 'img' || element.name == 'input') && editor.mode == "wysiwyg" ) {
if (!element.attributes.id){
var g = createID();
alert('new id: ' + g);
element.attributes.id = g;
}
}
I'm not sure whether "editor" would be the correct object name to use, you may want to use CKEDITOR.currentInstance.mode
There is also a getMode() method.
Here are some api references for the items mentioned:
mode property
currentInstance property
getMode() method

Went with plan B
Customized the widgets needed and added the id attribute in plugin. Was easy and fast.

JavaScript in DOM popup

SilverStripe 2.4.7
Hi
I have been reading this tutorial and have tried to implement it but I am confused. It doesn't seem to work but I'm not getting errors or anything.
My question is am I missing something like a module, etc? I have implemented the code like so...
JQ = jQuery.noConflict();
JQ(document).ready(function() {
// Find the select box, named differently on the update and add forms
var sel = JQ('select[id="DataObjectManager_Popup_DetailForm_Status"]');
if (sel.attr('id') == undefined) {
sel = JQ('#DataObjectManager_Popup_DetailForm_Status');
}
// hide either the internal or external link editing box
if (sel.val() == 'rejected' || 'Rejected') {
JQ('#DataObjectManager_Popup_DetailForm_Reason').show();
} else {
JQ('#DataObjectManager_Popup_DetailForm_Reason').hide();
};
// toggle boxes on drop down change
sel.change(function(e) {
if (sel.val() == 'rejected' || 'Rejected') {
JQ('#DataObjectManager_Popup_DetailForm_Reason').show();
} else {
JQ('#DataObjectManager_Popup_DetailForm_Reason').hide();
};
});
});
Nothing happens when I use the dropdown so do I need to install a module too or is there something else I'm missing?
Thanks in advance.

tinyMCE.get("content") is undefined

I get this message : tinyMCE.get("message_data_" + msg_id) is undefined on Firebug after
I click on the button to submit the form.
msg_id is defined, I checked it. message_data_ is also defined.
The function tinyMCE.get is not for some reason.

If you are using one single editor instance you may use tinymce.editors[0] instead of tinyMCE.get("message_data_" + msg_id).

If you do not have control over init method of TinyMCE then, you can follow this solution. Basically it adds a fallback if TinyMCE is not initialized.
jQuery(document).ready(function($) {
function myCustomSetContent( id, content ) {
// Check if TinyMCE is defined or not.
if( typeof tinymce != "undefined" ) {
var editor = tinymce.get( id );
// Check if TinyMCE is initialized properly or not.
if( editor && editor instanceof tinymce.Editor ) {
editor.setContent( text );
editor.save( { no_events: true } );
} else {
// Fallback
// If TinyMCE is not initialized then directly set the value in textarea.
//TinyMCE will take up this value when it gets initialized.
jQuery( '#'+id ).val( text );
}
return true;
}
return false;
}
function myCustomGetContent( id ) {
// Check if TinyMCE is defined or not.
if( typeof tinymce != "undefined" ) {
var editor = tinymce.get( id );
// Check if TinyMCE is initialized properly or not.
if( editor && editor instanceof tinymce.Editor ) {
return editor.getContent();
} else {
// Fallback
// If TinyMCE is not initialized then directly set the value in textarea.
// TinyMCE will take up this value when it gets initialized.
return jQuery( '#'+id ).val();
}
}
return '';
}
$(".class-to-update-content").on("click", function(e) {
myCustomSetContent( "tinymce-editor-id", "New Content in Editor" );
});
$(".class-to-get-content").on("click", function(e) {
$("div.class-to-display-content").html( myCustomGetContent( "tinymce-editor-id" ) );
});
});
Ref : http://blog.incognitech.in/tinymce-undefined-issue/

if you are using multiple editor in a form then you can create a function and get its value
i.e.
// Declare a function to get editor value
function tinyMca_text(field_id) {
if ( jQuery("#"+field_id+":hidden").length > 0)
{
return tinyMCE.get(field_id).getContent();
}
else
{
return jQuery('#'+field_id).val();
}
}
// show that value
console.log(tinyMca_text('field'));

How to append chars to a textbox while typing in tinymce textarea until pressing ENTER?

I have a simple textbox and a textarea which is "tinymce-d".
I'd like to append characters that I type into tinymce to textbox contents until I press ENTER

Correction of ShankarSangolis approch. Tinymce may be initialized for a textarea, but it is a contenteditable iframe while the textarea (or other init html element) becomes hidden. This is the correct way to do it. You need to call this code eigther on tinymce init or afterwards befor a user can type.
// the editorid equals the textarea id!
var editor = tinymce.get(editor_id) || tinymce.editors[0]; // use first tinymce editor if no editorid was provided
$(editor.getBody()).keyup(function(e){
if(e.which != 13){
$("textbox").val(this.value);
}
});

Try this.
$("textarea").keyup(function(e){
if(e.which != 13){
$("textbox").val(this.value);
}
});

Here's the code I'm using dugin tinymce init:
setup : function (theEditor) {
theEditor.onKeyUp.add(
function (theEditor, event) {
if(event.keyCode == 13) stop = true;
if (stop == false) {
var content = theEditor.getContent();
$("#subject").val(content);
}
}
);
}
stop is a global variable initialized before the init and then window.stop gets value when needed.