I wrote code for my form with parsley.js validator, however it works fine except CKEditor textareas. Where can be the problem? Here is screenshot
Here is my code:
<script type="text/javascript">
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change",function(e) {
for ( instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
});
});
});
</script>
<h2 class="heading">Description</h2>
<div class="controls">
<textarea name="description" id="description" required="" data-parsley-errors-container="#description-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
</div>
<div style="margin-bottom: 20px;" id="description-errors"></div>
<script>
CKEDITOR.replace('description');
</script>
<h2 class="heading">Purpose</h2>
<div class="controls">
<textarea name="purpose" id="purpose" required="" data-parsley-errors-container="#purpose-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
<div style="margin-bottom: 20px;" id="purpose-errors"></div><br><br>
<button type="submit" name="submit">Submit</button>
</div>
<script>
CKEDITOR.replace('purpose');
</script>
Your issue is related to the required attribute. After, this line:
CKEDITOR.on('instanceReady', function () {
you need to add such an attribute again, for each text area, because lost during CKEDITOR init phase (i.e.: CKEDITOR.replace('purpose');).
For a specific textarea you can write:
$('#description').attr('required', '');
For all the textareas belonging to the form:
$('form textarea').attr('required', '');
From your comment:
When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave
In order to solve this part, on CKEDITOR change event, you need to trigger parsley validation. The below line does the trick:
$('form').parsley().validate();
The updated code (jsfiddle here):
CKEDITOR.on('instanceReady', function () {
$('form textarea').attr('required', '');
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("change", function (e) {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
$('form').parsley().validate();
}
});
});
});
It's always so much easier to answer questions if you provide a minimal working example...
ckeditor hides the <textarea> and fills it in via Javascript.
Maybe the issue is that the error container is in the wrong place.
It's also very possible that ckeditor doesn't trigger the input event (not very well known). If that's the case, the following code should resolve the issue:
$('textarea').on('change', function() { $(this).trigger('input') })
Please update if this works or not.
Related
I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>
I have a form with a double-handles slider:
<form id="advancedSearch" action="modules/advanced_search.xq" method="post" onsubmit="advancedSearch(this);">
<div class="slider" id="slider" data-aria-valuemin="1725" data-aria-valuemax="1786" data-slider="data-slider" data-start="1725" data-end="1786" data-initial-start="1725" data-initial-end="1786">
<span id="handle1" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateFrom"/>
<span id="handle2" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateTo"/>
[...]
<input type="number" max="1786" min="1725" id="dateFrom" name="dateFrom"/>
</div>
<div class="cell small-2">
<input type="number" max="1786" min="1725" id="dateTo" name="dateTo"/>
[...]
</form>
It all works well.
Now, I'd like to call the function advancedSearch() when changing the slider's handle, without having to hit 'submit' each time.
Adding a oninput='advancedSearch(this.form); return false;' to the <input> elements does the trick only if I change the numbers inside the <input> field. When using the sliders, although document.getElementById('dateFrom').value does get changed, does not trigger the function. onchange also doesn't work. How can I call the function when changing the number by using the slider itself, other than changing the numbers inside the <input> field manually?
Adding a separate function:
document.getElementById('dateFrom').addEventListener('change', (event) => {
var formData = document.getElementById('advancedSearch')
advancedSearch(formData)
});
yields the same result.
Thanks to Prikesh Savla for pointing me towards the changed.zf.slider event. Unfortunately when implementing that with:
$("#slider").on('change changed.zf.slider', function(){ { var formData = document.getElementById('advancedSearch') advancedSearch(formData); }});
the page calls the function when loading it (either refreshing or landing there). After some troubleshooting I haven't been able to find the reason for that. In the end I'm adding this code:
document.querySelector('.slider').addEventListener("click", function () {
advancedSearch(document.getElementById('advancedSearch'));
});
document.getElementById('dateFrom').addEventListener("input", function () {
advancedSearch(document.getElementById('advancedSearch'));
});
document.getElementById('dateTo').addEventListener("input", function () {
advancedSearch(document.getElementById('advancedSearch'));
});
which does what I want, although I appreciate that it's not the most elegant solution.
The code below is working in a jfiddle, but once on my WordPress site it's not firing. I am updated to 4.6.1. I can't seem to find any errors in the console, either. Any ideas?
CSS:
<style>.bluebg { background: cyan; }</style>
HTML:
<nf-field>
<div class="nf-field-container textbox-container label-left ">
<div class="nf-before-field"><nf-section></nf-section></nf-section></div>
<div class="nf-field"><div id="nf-field-8-wrap" class="field-wrap textbox-wrap nf-pass" data-field-id="8">
<div class="nf-field-label">
<label for="nf-field-8" class="">Full Name <span class="ninja-forms-req-symbol">*</span></label></div>
<div class="nf-field-element">
<input id="nf-field-8" name="nf-field-8" class="ninja-forms-field nf-element" value="" type="text">
</div>
</div>
</div>
<div class="nf-after-field"><nf-section><div class="nf-input-limit"></div><div class="nf-error-wrap nf-error"></div></nf-section>
</div>
</div>
</nf-field>
JAVASCRIPT:
<script>
$('input.nf-element').bind('focus blur', function () {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
</script>
UPDATE
It looks like the problem is in the plugin that is generating the HTML, not the javascript I'm using. If I paste the same HTML in manually, that input field does change the parent class, but none of the fields that the form plugin generates (NinjaForms) will change.
I'm not sure if that's out of scope for assistance here, but if anyone has any ideas why that would be, I'd be appreciative!
Simply replace "$" with "jQuery".
To account for wordpress likely using jQuery.noConflict() try changing to:
(function($) {
$(function() {
$('input.nf-element').on('focus blur', function() {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
});
})(jQuery);
I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/
I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!
Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}
a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});
$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});
If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.
THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown
It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});