jQuery Validate Non-Visible Fields - javascript

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.

Related

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.

JQuery Validate plugin alters submission button CSS

I am using Jquery Validate plugin for a form. Everything works fine except if I tab to the submission button it changes the text color. I have tried using the "ignore:" option then specify the class of the submission button in the validate() function but this doesn't work.
$("#edit_phone_form").validate({
ignore: ".orange-button",
rules: {
phone_number: {
required: true,
phoneUS: true
}
}
});
If anyone knows how I can tell Validate to ignore the ".orange-button" class please let me know. I have no code that is manipulating this button so I know Validate is doing something since it does this same text effect with all other form elements.
Thanks!
Quote OP:
" have no code that is manipulating this button so I know Validate is doing something since it does this same text effect with all other form elements."
There is absolutely nothing in the jQuery Validate plugin that is affecting the color/look/style of your buttons... nothing at all. Even when the plugin adds or removes classes on validation, it does not contain any CSS properties, nor does it manipulate any CSS properties, period.
Furthermore, the plugin doesn't validate buttons since they have nothing to do with entering data into the form. The plugin only validates the various "data input" elements, text boxes, text areas, select lists, radios and checkboxes... and nothing else. Then if the form data passes/fails validation, a success/error class is applied to the element along with a new element containing an error message.
Here is a demo with what you've described in your OP: http://jsfiddle.net/5vFCg/
<input type="submit" class="orange-button" />
As you can see, the submit buttons are rendered as default browser buttons, and their look is totally unaltered from the browser default, proving that jQuery Validate is doing nothing to these buttons.
You must have overlooked something. Show enough code to create a demo of what you're seeing.

javascript autosubmit form when dropping value into text field

I'm having a simple form with just a text field. I'm dropping in values (drag and drop), which works fine (of course), but I want to autosubmit as soon as I've dropped the value into it.
From what I understand 'onchange' wouldn't work, because you need to actually exit the field for it to submit..
Same with 'onmouseup'.. doesn't work either unless I click in the field again...
How can I fix this?
form:
<form name="getrdun" action="getrdun" method="post">
Original string: <input type="text" name="origstuff" value=""><br>
<input type=submit value="Submit">
</form>
The input event should do the trick, although note from the reference that there are some problems with IE9 and Opera.
Updated with details:
Instead of using the change event, listen for the input event. You don't show any code, so I don't know how you're setting up event listeners, but, e.g. using plain old JavaScript.
inputEl.addEventListener('input', function() {
// submit the form here...
})
A jQuery version:
$('input[type="text"]').on('input', function() {
// submit the form here...
})
Obviously, you'll want to select the <input> element appropriately.

Why is jQuery validation not working here

I am trying to validate a form with jquery validation but it does not show the expected error message. How can I set it so it show my messages?
here is the javascript that I am using:
$(function () {
$("#registerForm").validate({
rules: {
inputEmail: {
required: true,
email: true
}
},
messages: {
inputEmail: "Please enter a valid email address"
}
});
});
Please have a look at the jsfiddle link of my code:
JSFIDDLE code with html/bootstrap *Updated
On the live version of my site it does not even show the popup message that is appearing in jsfiddle. Please help me in fixing this.
Ideally I would like to display inline messages or a summary if validation fails but don't know how to do this. I was hoping if jquery validation works then I would be able to specify custom functions to handle success and error events.
I would appreciate if someone can help me out here. Thanks.
UPDATE
Notice how you still have this issue even after I've removed jQuery and jQuery Validate from the jsFiddle?
http://www.jsfiddle.net/xRRZb/4
The pop-up bubbles and over-riding messages are generated directly by the browser thanks to HTML5... nothing to do with any of your JavaScript or jQuery code.
So since you've already defined the required and email rules within .validate(), remove required and type="email" from your inline HTML:
<input type="text" name="inputEmail" id="inputEmail" placeholder="E.g. youremail#website.com" />
DEMO: http://www.jsfiddle.net/xRRZb/6
EDIT:
jQuery Validate 1.8 is quite old. Consider upgrading to version 1.11.1
In fact, this is likely your whole problem. Version 1.11.1 dynamically adds a novalidate="novalidate" attribute to the form tag to disable HTML5 validation when the plugin is being used.
Unfortunately, version 1.8 does not have this feature.
Alternatively, you could manually add the novalidate attribute to ensure that you disable HTML5 validation. However, if you manually add the novalidate attribute, there will be no fallback.

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

Categories