We Keep Coding

jQuery Validate Non-Visible Fields

I've seen bunches of questions about this, but wanted to clarify my understanding. It all started when I was setting up jQuery validation on a popup form. If I added the validate() method while the form wasn't visible, the validation didn't work (straight submit). If I added validation after the form element was visible, all is well... the validate fires and doesn't submit the form.
So, I tried to isolate this behavior and this is what I ended up with:
https://jsfiddle.net/KyleMit/ph8ue5j5/
Here's the HTML:
<form id="form" style="display: none;">
<input type="text" name="name" id="name" placeholder="Name" required="requited" /><br/>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
Here's the JS:
$(function() {
$('#form').validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters"
}
}
});
window.setTimeout(function() {
$("#form").show()
}, 3000);
});
If you run this, you will see the form is first invisible. Then after 3 seconds, becomes visible. This is the same setup as my popup form.
What surprises me is the validations works! This goes against what I have been reading and what I've witnessed in my web project.
Can anyone explain this?

It depends on which version you're using. As of version 1.9.0, ignore: ":hidden" is the default option, so it doesn't need to be set explicitly. Depending on when you were looking at answers or which version you were using, you might see different answers.
In your example, you're using v1.11.0, so hidden elements should be ignored by default. The :hidden selector includes elements that:
have a display value of none.
are form elements with type="hidden".
have width and height are explicitly set to 0.
have an hidden ancestor, so the element is not shown on the page.
If you want to change that, you need to pass in a different value for ignore in the options object.
The point that seems to be causing confusion is at what point the validation check if an element is hidden. When a form submits, jQuery-Validate will re-check any inputs. It's at that point that elements in your ignore will be chosen or not. So if an element is visible by the time you're hitting submit, it will be validated.
Try running the sample below. If you submit before the first element has a chance to load, you'll only get a single warning, even though both inputs are required, because the first one is excluded because it's hidden. Wait until the script shows the first input and try to submit again, and both elements will be included.
Demo in Stack Snippet
$(function() {
$('#form').validate({
ignore: ':hidden'
});
window.setTimeout(function() {
$('.hidden').show()
}, 4000);
});
.hidden {
display: none;
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>
<form id="form" >
<input type="text" id="hidden" name="hidden" placeholder="Originally Hidden" required="required" class="hidden" /><br/>
<input type="text" id="visible" name="visible" placeholder="Originally Visible" required="required" /><br/>
<input type="submit" id="submit" value="submit"/>
</form>

"This goes against what I have been reading and what I've witnessed in my web project."
Unfortunately, you did not provide an example of this alternative behavior you're describing. We can only see your demo, which is working exactly as designed.
Can anyone explain this?
Not until you show us the broken version.
$('#form').validate({ ....
You can attach the .validate() method to a hidden form and the plugin will be ready to validate this form. As long as the HTML exists when you call .validate(), the plugin is initialized and ready for form validation.
If the form fields are hidden OR if the form fields are inside a hidden container, there will be no validation on these fields. HOWEVER, this will not prevent you from initializing the plugin on the form as described in #1 above. Simply making the fields visible (in this case the whole form) allows them to be validated.
You can optionally validate hidden fields by setting the ignore option to []. However, I don't believe you're asking about how to validate hidden fields.
Quote OP Comment:
What I'm seeing in my project is if the form is hidden when the validate() method is called, and the form becomes visible, it still won't validate. But if I call the validate() method after the form is visible, it works.
The demo you've provided is showing the exact opposite of what you describe.
My demo below is a variation of yours. The .validate() method is attached to a hidden form. Then when you click the button to show the form... validation is already working.
DEMO: https://jsfiddle.net/1v35f7L2/1/
FWIW, make sure you're using the latest version of jQuery and the jQuery Validate plugin. Your demo is using jQuery 1.6, which is several years old and jQuery Validate 1.11, which is also a little old.

parsley.js - clear error message when using CKEditor

I have spent several hours trying to get this issue to work, but I am getting nowhere fast, so I am hoping some one can assist me. I have tried many attempts, searched StackOverflow and Google.
I have a form with a textarea. I have implemented parsley.js on to a form. The parsley validation is working fine, until I add in the CKEditor to the textarea.
The issue I have is that the parsley error message persists (is always displayed) when I submit the form with no value in the CKEditor, even after I enter characters into the CKEditor.
How do I clear the parsley error message when entering data into the CKEditor
I think the reason is that there is no onKeyUp action on the textarea, because the onKeyUp action is now operating on the CKEditor and the textarea is hidden, but then not being able to remove the parsley required error message when I enter data into the CKEditor is killing me.
Here is my form:
<form id="details_form" class="form-horizontal" method="post" data-parsley-validate>
Here is the textarea code:
<p>
<textarea rows="10" data-parsley-required="true" data-parsley-maxlength="5000" data-parsley-required-message="This field is required." id="id_field" cols="40" name="field" data-parsley-id="8686" dir="ltr"></textarea>
<span class="parsley-errors-list" id="parsley-id-8686"></span>
</p>
Any help would be great.

I had the same problem. So here is the solution ;)
HTML:
<textarea id="ckeditor" data-parsley-required="true" data-parsley-required-message="This field is required" rows="6"></textarea>
JS:
CKEDITOR.replace( 'ckeditor' );
CKEDITOR.config = {
autoUpdateElement: true,
}
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();
});
});
});

Edited due to comment by mightyspaj:
CKEditor does not actually operate ontop of the textarea element. The element gets replaced by an iframe to provide the UI. This problem sounds like the textarea is not being updated properly.
I suggest that you access the textarea by JavaScript and manually trigger different events on it to see if the validation message changes due to those triggers. Parsley might have the events it listens to documented somewhere.
When you find for sure the offending event, simply bypass the automation and fire it yourself. If you need live refreshing do for example a 1second setInterval to trigger the validation.
Old answer:
Sounds like you want the autoUpdateElement configuration setting: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-autoUpdateElement
CKE does not operate directly on the textarea, it creates an iframe and does some other magic. So, the underlying element needs to be updated. You can do this manually using the updateElement() function or you can try autoUpdateElement setting above.

Change an input value and submit the form on keypress (not just enter to send)

I'm really confused. I want to make a sort of a hotkey that changes the value of a hidden input field and submits the form. How can I do that? I've read numerous blogs and tutorials but all assume that I just want to submit the filled form after pressing enter. While I just don't understand how the very "structure" of a form acts in javascript.
Should I fill the hidden input like this:
document.getElementById('foo').value='bar'
I don't think there's even a way to see if its value was changed so I'm not sure.
And then, how do I submit the form, if I have:
<form name='myform' method='post' action='url.html'>
I tried document.myform.submit() and document.myform.form.submit(), and I've also tried giving the form an id and using document.getElementById('myformid').submit() but none of these work! I usually get the error TypeError: 'undefined' is not an object.
I'm new to javascript, I'm used to working with python but it has a completely different philosophy, and maybe that's the source of my confusion. I'd very appreciate some explanation, not just a code snippet.
Thanks!

You can always check the hidden field with the Development Tools of your Browser - just press F12 and you will see it. Go to the DOM list (within the Development Tool) and then you see the actual value of that field.
To submit a form via JavaScript normally document.name.submit() is enough. Another option is that you use e.g. jQuery to submit a form via AJAX (with the help of jQuery.serialize)

If you want to use document.getElementById('myformid').submit() you have to give an ID to your form like that :
<form name='myform' id="myform" method='post' action='url.html'>
It's the same thing about your hidden field.
document.getElementById('foo').value='bar' assume you have an hidden like that :
<input type="hidden" name="foo" id="foo" />

You can try the following approach
<form name='myform' method='post' action='url.html'>
// your fields here
// then use a input type button to have a button and define an on click event
</form>
<script type = "text/javscript">
use the event in your script
//change your hidden field value here and
// submit the form by
myform.submit();
</script>

You can use ajax or jquery as there is a function named on key up it means after pressing a key on the last field which ever you choose as you leave the key on keyboard it will submit the forms.
check this okay http://www.w3schools.com/php/php_ajax_livesearch.asp

Capture browser cached data dropdown onclick

I'm having some problems adding a dropdownlist with ajax and stuff using jQuery. When you click or you type on the input text a method creating the jQuery dropdownlist will be called. However if you already submitted this form, when you type you get the typical browser simple dropdown with previous submitted data. I'm having a hard time figuring what event do trigger clicking in that dropdownlist element.

Just add
autocomplete="off"
attribute to your input fields, for example:
<input type="text" name="myField" autocomplete="off">

Enter triggers button click

I have a page with two buttons. One is a <button> element and the other is a <input type="submit">. The buttons appear on the page in that order. If I'm in a text field anywhere in the form and press <Enter>, the button element's click event is triggered. I assume that's because the button element sits first.
I can't find anything that looks like a reliable way of setting the default button, nor do I necessarily want to at this point. In the absence of anything better, I've captured a keypress anywhere on the form and, if it was the <Enter> key that was pressed, I'm just negating it:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
As far as I can tell so far, it seems to be working, but it feels incredibly ham-fisted.
Does anyone know of a more sophisticated technique for doing this?
Similarly, are there any pitfalls to this solution that I'm just not aware of?
Thanks.

Using
<button type="button">Whatever</button>
should do the trick.
The reason is because a button inside a form has its type implicitly set to submit. As zzzzBoz says, the Spec says that the first button or input with type="submit" is what is triggered in this situation. If you specifically set type="button", then it's removed from consideration by the browser.

It is important to read the HTML specifications to truly understand what behavior is to be expected:
The HTML5 spec explicitly states what happens in implicit submissions:
A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.
This was not made explicit in the HTML4 spec, however browsers have already been implementing what is described in the HTML5 spec (which is why it's included explicitly).
Edit to add:
The simplest answer I can think of is to put your submit button as the first [type="submit"] item in the form, add padding to the bottom of the form with css, and absolutely position the submit button at the bottom where you'd like it.

Where ever you use a <button> element by default it considers that button type="submit" so if you define the button type="button" then it won't consider that <button> as submit button.

I don't think you need javascript or CSS to fix this.
According to the html 5 spec for buttons a button with no type attribute is treated the same as a button with its type set to "submit", i.e. as a button for submitting its containing form. Setting the button's type to "button" should prevent the behaviour you're seeing.
I'm not sure about browser support for this, but the same behaviour was specified in the html 4.01 spec for buttons so I expect it's pretty good.

By pressing 'Enter' on focused <input type="text"> you trigger 'click' event on the first positioned element: <button> or <input type="submit">. If you press 'Enter' in <textarea>, you just make a new text line.
See the example here.
Your code prevents to make a new text line in <textarea>, so you have to catch key press only for <input type="text">.
But why do you need to press Enter in text field? If you want to submit form by pressing 'Enter', but the <button> must stay the first in the layout, just play with the markup: put the <input type="submit"> code before the <button> and use CSS to save the layout you need.
Catching 'Enter' and saving markup:
$('input[type="text"]').keypress(function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
// also submit by pressing Enter:
$("form").submit();
}
});

Pressing enter in a form's text field will, by default, submit the form. If you don't want it to work that way you have to capture the enter key press and consume it like you've done. There is no way around this. It will work this way even if there is no button present in the form.

You can use javascript to block form submission until the appropriate time. A very crude example:
<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">
<input type='text' name='txtTest' />
<input type='button' value='Submit'
onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />
</form>
Pressing enter will still trigger the form to submit, but the javascript will keep it from actually submitting, until you actually press the button.

Dom example
<button onclick="anotherFoo()"> Add new row</button>
<input type="text" name="xxx" onclick="foo(event)">
javascript
function foo(event){
if(event.which == 13 || event.keyCode == 13) // for crossbrowser
{
event.preventDefault(); // this code prevents other buttons triggers use this
// do stuff
}
}
function anotherFoo(){
// stuffs.
}
if you don't use preventDefault(), other buttons will triggered.

I would do it like the following: In the handler for the onclick event of the button (not submit) check the event object's keycode. If it is "enter" I would return false.

My situation has two Submit buttons within the form element: Update and Delete. The Delete button deletes an image and the Update button updates the database with the text fields in the form.
Because the Delete button was first in the form, it was the default button on Enter key. Not what I wanted. The user would expect to be able to hit Enter after changing some text fields.
I found my answer to setting the default button here:
<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
Without using any script, I defined the form that each button belongs to using the <button> form="bla" attribute. I set the Delete button to a form that doesn't exist and set the Update button I wanted to trigger on the Enter key to the form that the user would be in when entering text.
This is the only thing that has worked for me so far.

You can do something like this.
bind your event into a common function and call the event either with keypress or button click.
for example.
function callME(event){
alert('Hi');
}
$('button').on("click",callME);
$('input ').keypress(function(event){
if (event.which == 13) {
callME(event);
}
});

I added a button of type "submit" as first element of the form and made it invisible (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Works like a refresh of the site, i.e. I don't do anything when the button is pressed except that the site is loaded again. For me works fine...