I want to validate my textbox on keypress event. As I am newbie with jquery, I searched on google and found one jquery plugin named 'limitkeypress'.
This is my code:
$(document).ready(function() {
$("#title").limitkeypress({ rexp: /^[A-Za-z]*$/ });
});
Plugin library is:
http://brianjaeger.com/process.php
It's giving me the following error
$("#title").limitkeypress is not a function
When I checked the library on jsfiddle it shows me dozens of errors. Is there any other validation library or plugin?
EDIT Thanks everyone for your valuable comment. Finally I got the solution. Though I was including file correctly. but don't know Y it was not working. I wrote jQuery.noConflict(); and all the problem is solved. What exactly it work. Please let me know, though I read but doubt still I have doubt.
regexp is ok:
'buGaGa'.match(/^[A-Za-z]*$/);
$("#title").limitkeypress is not a function probably you forget to inlude library or wrong path.
Check it in Firebug( Net -> All ) lib must be highlight in black, not red.
Made a demo: http://jsfiddle.net/tTASy/
plugin seems to work fine.
Check your path to the script. if you paste a link to your page we could help you more specifically.
You can do this in jQuery like this without the plugin..
$("#your_textbox").keypress(function() {
var length = this.value.length;
if(length >= MIN && length <= MAX) {
$("#your_submit").removeAttr("disabled");
$("#your_validation_div").hide();
} else {
$("#your_submit").attr("disabled", "disabled");
$("#your_validation_div").show();
}
});
Related
first my code, all in one .hbs file:
<form id='specialform'>
<input name='about' type='hidden'>
<div id='editor'><p>Type something :D</p></div>
<button type='submit'>Reload</button>
</form>
<script>
var form = document.querySelector('#specialform');
form.onsubmit = function() {
var about = document.querySelector('input[name=about]');
about.value = JSON.stringify(quill.getContents());
console.log('Submitted!');
console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());
alert('Open Console!');
return false;
}
</script>
Now when I'm trying to press the submit button while testing, nothing happens instead of the expected console.log(...).
I looked everywhere for an answer, hope you guys can help me. I'm just learning node.js and quilljs and it's pretty difficult.
Thanks for the help. I got the code from this preset https://quilljs.com/playground/#form-submit.
EDIT: Fixed the document.querySelector('specialform') to document.querySelector('#specialform'), still does not work.
EDIT2: Function is now closed with }, just forgot it when copying the code. Problem still persists.
EDIT3:
Made a dummy function:
form.onsubmit = function() {
alert('This one works');
console.log('Submitted!');
return false;
}
Which did NOT work without the return false; statement, but DOES work with it! I changed the original function and included the return, but it still does NOT work sadly.
EDIT4:
I played around with the dummy function some more and have isolated the problem.
It stems from this line:
console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());
Can someone tell me why it does not work? :)
One can ignore the problem with that line if one does: function (e) { e.preventDefualt(); ... }, but the change only "goes around"(?) the problem and does not fix it.
EDIT5:
With e.preventDefault() the function works, but there is still no 2nd console.log. So apparently handlebars has a problem with the $(form).serialize(), or I'm just too stupid to see my error. Thanks everyone who helped me anyway!
EDIT6:
ISSUE SOLVED! $.(form).serialize() uses the jquery library which is not that easy to work with in node.js and obviously has to get imported first. I thank everybody who helped me solve it!
try this
var form = document.querySelector('#specialform');
you've missed a hash while using the id selector
document.querySelector needs a valid CSS selector.
document.querySelector('specialform');
is saying, hey JS -- get all specialform elements. If you had <specialform><!-- content goes here --></specialform> elements on your page, then that would work.
Instead, you probably want
document.querySelector('#specialform');
That's saying, hey JS -- get all elements with an ID of specialform.
var form = document.getElementById('specialform');
If you know that you are serching by id than i would use this.
Its faster than query, because it doesnt take care about classes attributes and so on.
And its less error prone if you are unsure about query selectors.
In my opinion the querySelector makes more sense if your structure is more complex.
I currently am trying to create a website using Symfony 4. The issue is that one of my pages is in need of a jQuery script to work, part of it is working but functions like these aren't called, why ?
Example of code not being called :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents(); //this is another external function that I don't
//manage to call, even when called in the
//executed part
});
});
I am sure it doesn't come from my javascript as I tested it "off-symfony".
Thanks in advance, Crikripex
Alright, so after hours trying to figure out what and where the issue is, I came to the conclusion (thanks to #fyrye) that there might be compatibility issues between jQuery and Symfony4 or Webpack Encore.
I then decided to "translate" my code from jQuery to Javascript without any library and it worked fine.
To summarize, I went from :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents();
});
});
to :
for(i=0;i<maxId;i++){
document.getElementById("contain_" + i).onclick = function(event){
event.preventDefault();
document.getElementsByClassName("focused")[0].classList.remove("active");
document.getElementsByClassName("focused")[0].classList.remove("focused");
document.getElementById(this.id).classList.add("active");
document.getElementById(this.id).classList.add("focused");
refresh_contents();
}
}
I know it doesn't look as fancy, it's not as easy to code as jQuery, but so far that's the only solution I found that actually works.
Thanks for your help everybody.
If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...
I need to trigger a custom javascript function when something is typed into FCKeditor 2 textarea. However, I have searched far and wide and can't find an answer to this. Would like to do something like add onkeypress="customfunction()" to the textarea somehow.
Thanks for any help!
managed to find something in the end using some hints of words. Here is how to do an onkeypress even on FCKeditor 2.0. You need to load this javascript AFTER the editor code is called:
function FCKeditor_OnComplete(editorInstance){
if (document.all) { // If Internet Explorer.
editorInstance.EditorDocument.attachEvent("onkeydown", function(event){alert('key was pressed');} ) ;
} else { // If Gecko.
editorInstance.EditorDocument.addEventListener( 'keypress', function(event){alert('key was pressed')}, true ) ;
}
}
This seems to work:
CKEDITOR.instances.<yourEditorname>.document.on('key', function(event) { });
Found here: http://cksource.com/forums/viewtopic.php?t=18286