validating FCKeditor - javascript

how can FCKeditor be validated for required field using javascript.

Try this,
var EditorInstance = FCKeditorAPI.GetInstance('message') ;
if(EditorInstance.EditorDocument.body.innerText.length<=0)
{
alert("This firld is mandatory");
EditorInstance.EditorDocument.body.focus();
return false;
}
Source:
http://dreamtechworld.wordpress.com/2008/12/06/validating-firld-in-fckeditor-using-javascript/

Use FireBug, and see what hidden textarea it is updating. Then check that element.
if (document.getElementById('fckinstance').innerHTML === '') {
alert('required field');
}
That is just an example. It probably doesn't use an id like that either, because of multiple instances on the same page.
The textarea that FCKeditor replaces is probably the one that holds its HTML.
Note too, the FCKeditor can seem blank, even though there is HTML in it.

To Validate FCKeditor for being empty, create below function and call it whenever going to validate your editor containing TEXTAREA:
function FCKCopy() {
for (var i = 0; i < parent.frames.length; ++i ) {
if (parent.frames[i].FCK)
parent.frames[i].FCK.UpdateLinkedField();
}
}
Then add another function to Strip HTML tags from TEXTAREA's value:
function stripHTML(oldString) {
var matchTag = /<(?:.|\s)*?>/g;
return $.trim(oldString.replace(matchTag, ""));
}
In above function used jQuery's trim function. Use jQuery or replace it with some trimming function for java script such as:
function trimIt(text) {
rwhite = /\s/;
trimLeft = /^\s+/;
trimRight = /\s+$/;
if ( !rwhite.test( "\xA0" ) ) {
trimLeft = /^[\s\xA0]+/;
trimRight = /[\s\xA0]+$/;
}
return text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
}
Now you can check value of TEXTAREA for example as below:
if (stripHTML($('message').val()) == '') {
alert('Please enter Message.');
}
Hope it will work as good as worked for me.
Have fun

this may be useful for someone
var EditorInstance = FCKeditorAPI.GetInstance('JobShortDescription');
alert(EditorInstance.GetHTML());
resource is http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/JavaScript_API

Related

Check if text includes a specific value in text area

I have a JS where I can verify if the a value is being entered and warn the user to change the input.
the script is working fine only if only that value exist in the text and if the value with some other text will not work.
$(function() {
const setup = function(fieldSelector) {
const field = $(fieldSelector);
const applyStyle = function() {
if (field.val() == 'urgent')
{
alert("Text not allowed!");
field.css({'background-color': 'red'});
} else {
field.css({'background-color': ''});
}
};
field.on('change', applyStyle);
applyStyle();
}
// Note: Change the ID according to the custom field you want to target.
setup('#issue_custom_field_values_17');
});
this code is under redmine issue tracker.
Any guidance will be much appreciated
I'm very unfamiliar with jQuery, but couldn't you just replace
if (field.val() == 'urgent')
with
if (field.val().includes('urgent'))
or even
if (field.val().indexOf('urgent')>-1)

How to match anything between < & > in regex?

I'm trying to match anything that lies between < and >, and nothing seems to be working.
My current code is:
var regex = /\<(.*?)\>/
var targeting = $('#auto-expand').val //A text area
function validateText(field)
{
if (regex.test(field) == true)
{
alert(field.match(regex))
}
else
{
alert("fail")
}
}
It keeps returning fail, not sure why.
Any help would be so great! :)
It's not clear from your question how you are calling the validateText function. But it looks like are trying to set targeting outside the function, which means you are probably setting it before there's text in the box.
Below I change val to val() to call the function and looked up the value when the function runs rather than before. The regex itself works fine (keeping this in mind)
var regex = /<(.*?)>/
function validateText() {
var targeting = $('#auto-expand').val() //A text area
if (regex.test(targeting) == true) {
alert(targeting.match(regex))
} else {
alert("fail")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="auto-expand"></textarea>
<button onclick=validateText()>Test</button>

if this input has value doesn't work in IE 9

I am using this simple code to filter through a search form with many text inputs and see if they have a value and then add a class.
Works perfectly in Chrome, safari and Firefox but not in IE9.
$('input[type="text"]').filter(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
Please advice, thanks in advance!
EDIT
Change to each but doesn't solve the issue... Here it is with the event that triggers the function...
$(document).on('event-ajax-form-is-loaded', function() {
$('input[type="text"]').each(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
});
From the limited information you shared, this is how you should be doing this:
$('input[type="text"]').filter(function() {
return $(this).val() !== '';
}).addClass('used');
.filter() is supposed to reduce a set of matched elements so its filter function should always return a bool instead of manipulating the DOM.
Edit: Based on your updated code snippet and the page link you shared in the comments, if you are using jQuery in WordPress, then its always safer to wrap the code like so:
(function($) {
/* jQuery Code using $ object */
})(jQuery);
enter code hereIn JS you can check the element value by getting their tag name
for (var i = 0; i < document.getElementsByTagName('input').length; i++){
if (document.getElementsByTagName('input')[i].value == "")
{
alert("The value of textbox at " + i + " is empty");
}
}
Working Demo
Or like what other people suggest, use a .each in JQuery
$('input[type="text"]').each(function(i){
if ($(this).val() == "") {
alert("The value of textbox at " + i + " is empty");
}
});
anohter Working Demo
If you insist to use filter and here you go
$('input[type="text"]').filter(function()
{ return $( this ).val() != ""; }).addClass("used");
Last Working Demo
and jquery filter reference

JavaScript for HTML5 required field set up to work in Safari

I am using the following script to change the HTML5 required attribute of my input elements. I am wonder whether there is a way to modify this script to make it also work in Safari browsers, since Safari does not support this attribute.
Here is the script:
$(document).ready(function() {
$_POST = array();
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field can't be blank");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
You can also do this:
var valid = true;
$('input[required]').each(function() {
if (this.value == '') {
// Alert or message to let them know
valid = false;
return false; // stop on first error, or remove this and it'll go through all of them.
}
});
if (valid === false) {
return false;
}
Check out this page here. It contains a hacky solution that should add the desired functionality
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
You're going to need to run the check yourself using an event handler on your form submission. In that handler, you run the check yourself, and if it fails, you display whatever error message and block the submission using preventDefault or return false.
An example can be found here, though as it notes, you need to be careful if you use checkValidity as your means of checking the form.

Using jQuery to display input TITLE as VALUE (jsfiddle included)

I am trying to come up with a simple jquery input watermark function. Basically, if the input field has no value, display it's title.
I have come up with the jquery necessary to assign the input's value as it's title, but it does not display on the page as if it was a value that was hand-coded into the form.
How can I get this to display the value when the page loads in the input field for the user to see?
Here's the fiddle: http://jsfiddle.net/mQ3sX/2/
$(document).ready(function() {
$(".wmk").each(function(){
var value = $(this).val();
var title = $(this).attr("title");
if (value == '') {
value = title;
}
$(".result").text(value);
// You can see I can get something else to display the value, but it does
// not display in the actual input field.
});
});
Instead of writing your own, have you considered using a ready-bake version? It's not exactly what you asked for, but these have additional functionality you might like (for instance, behaving like a normal placeholder that auto-hides the placeholder when you start typing).
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
http://archive.plugins.jquery.com/project/input-placeholder
Use the below line of code. You need to specify the input element, and update its value. Since your input field has a class called '.wmk', I am using the below code. You can use "id" and use "#" instead of ".". Read more about selectors at http://api.jquery.com/category/selectors/
$(".wmk").val(value);
Updated jsfiddle http://jsfiddle.net/bhatlx/mQ3sX/9/
Update: since you are using 'each' on '.wmk', you can use
$(this).val(value)
I think what you want is this:
$(document).ready(function() {
$(".wmk").each(function(){
var value = $(this).val();
var title = $(this).attr("title");
if (value == '') {
$(this).val(title);
}
$(".result").text(value);
});
});
May be you want something like below,
DEMO
$(document).ready(function() {
$(".wmk").each (function () {
if (this.value == '') this.value = this.title;
});
$(".wmk").focus(
function () {
if (this.value == this.title) this.value = '';
}
).blur(
function () {
if (this.value == '') this.value = this.title;
}
);
}); // end doc ready

Categories