I am using jquery validate plugin to validate my form. So when a user clicks on submit button it validates the form.
Now if user clicks on any form element the error should be cleared until user leaves the input.
So from plugin documentation I know that focusCleanup is exactly what I am looking for.It works for all elements except drop downs.
Fix that work for all element but drop-downs
http://jsfiddle.net/paraselixir/sw87W/259/
To fix this I have tried following settings for validation plugin
settings = {
// global form validator settings
errorClass : 'error',
errorElement : 'span',
onkeyup : false,
.
.
focusCleanup : true,
onclick:false,
.
.
.
}
Reference: https://forum.jquery.com/topic/jquery-validate-select-box-with-focuscleanup
This solution has fixed the issue for dropdowns but now same issue is happening on checkboxes.
Fix that works for drop-downs but not for checkboxes
Fiddle Example :http://jsfiddle.net/sw87W/257/
So I need a solution that works for all elements.
After submitting the form when you click on these elements, in jsfiddle.net/sw87W/257 error message hides when you click on select box
Apparently, the onclick option also disables the select. However, if you need the onclick: false option for the checkbox, then you'll need to write another handler for the select element...
$('[name="numbers"]').on('click', function() {
$(this).valid();
});
DEMO: http://jsfiddle.net/d83oaa3v/
Related
i have a selectbox which have some options according to which other options are shown or hidden. for eg user select option A and it will show some fields using
simply
$(element).show();
function of jquery.
but the problem is that jquery validation plugin doesn't validates these fields even there are now visible.
I know that it doesn't validate hidden fields but these are visible now but it still not working
here is jquery i am using
$('#order_status_form').validate({ignore: ":not(:visible)"});
$('#order_status_dropbox').change(function(){
$(this).val()=="shipped"?$('.temp_hidden_field').show():$('.temp_hidden_field').hide();
});
Don't answer to this question . I will close this question by now. The problem was with another input element which was left unclosed and was causing problem.
If you ever encounter problem like this then check for this error also
I am using select2 4.0.3. I have a select2 box to enter email addresses, and I would like to make sure that all email addresses are included in .val(), also the one that the user was still typing in the search field.
The form field is referenced by $('.invite-emails-field'). When I press the Send button, in the event handler $('.invite-emails-field').val() just gives me the first two addresses test1#example.com and test2#example.com, but not the third address (test3#example.com).
This is how I initialize the select2 element:
$('.invite-emails-field').select2({
tags: true,
tokenSeparators: [',', ' '],
selectOnBlur: true
});
The selectOnBlur has no effect, and I cannot find anything else that works on select2 v4. I tried firing several events at various elements, none of it worked.
I expect that when I press the Send button, that I can make some call to the select2 box to trigger creating a tag for the contents of whatever is then in the search field test3#example.com, and that subsequently .val() returns an array with all three addresses.
Update: I created a jsFiddle for you to play with. Enter input like this:
and then press the Send button, you will see:
where test3#example.com is missing from the output.
Note that in my real application I have disabled the dropdown because I just want the tagging behaviour.
You need to add selectOnClose and set it to true so that it creates the tag for you when you close / click off of the search input.
$('select').select2({
selectOnClose: true
});
See the official documentation here:
https://select2.github.io/options.html#can-i-select-the-highlighted-result-when-the-dropdown-is-closed
Scenario: I have a form with several accordions (that are expandable divs), each one has some required fields, the user is free to collapse or expand them, so, in some cases, there are non filled mandatory hidden fields (because collapse) when form is submitted.
Problem: In Chrome, no errors appears to user, only in the console you can read:
An invalid form control with name='' is not focusable.
I've found plenty of answers to this issue. I exactly know why is this happening, but I've not found any solution to my problem.
What i've tried: Before submitting the form, expand all accordions to make visible all required fields so I can allow browser to focus element and show Required field message (see update)
Desired solution: identify id of mandatory field that requires a content, to expand it's accordion container and focus the field
UPDATE:
Solution found expanding all collapsable divs by javascript is not working in all cases, so IS NOT a solution.
QUESTION: there is some way can I show the field before validation?? If no... Can I focus or identify a hidden mandatory field when submitting form.
I personally would go with Niet the Dark Absol's suggestion about checking fields when changing section and displaying warning flags (I think it would give a better user experience).
But if you want to continue with the check on form submission, there's a way of tricking the browser into doing what you want by using JavaScript. The browser identifies and highlights the first invalid field that is visible when the page validates (for IE and FF it will highlight all the invalid fields that are visible); so, before the form validation happens, you'd need to run a quick check and open the accordion section that contains the first invalid field.
The key is to run that check before the HTML5 validation happens. That means that onsubmit is not good enough, as the browser will validate before the submit event. You need to run the code when the submit button/image is clicked, as that click event happens before the browser validates the fields.
You didn't specify if it was for jQuery UI or Bootstrap, so here are examples for both (the code is similar, just changing the way to handle opening/closing the accordion):
JQUERY UI ACCORDION
You can see a working demo for jQuery UI on this JSFiddle: http://jsfiddle.net/ma8v32ug/1/. The JavaScript check would be like this:
// save the accordion in a variable as you'll need it later
$accordion = $("#accordion").accordion();
// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {
// traverse all the required elements looking for an empty one
$("#myForm input[required='required']").each(function() {
// if the value is empty, that means that is invalid
if ($(this).val() == "") {
// find the index of the closest h3 (divide by 2 because jQuery UI accordion goes in pairs h3-div. A bit hacky, sorry)
var item = $(this).closest(".ui-accordion-content").prev().index() / 2;
// open that accordion section that contains the required field
$accordion.accordion("option","active", item);
// stop scrolling through the required elements
return false;
}
});
});
BOOTSTRAP ACCORDION
Note: this is valid for version 3.3.4 of Bootstrap. I haven't checked in older or newer versions.
One important thing to take into account for Bootstrap is that you cannot use the .collapse({toggle: true}) functionality because the animation takes more time than what the browser needs to validate the form, and the result will be unexpected (normally, the browser will stop the animation to point at the error, and it will not be the field that you want).
A solution to that is to do the toggle without animation, just by changing the .in class in the panels, and adjusting the target panel height. In the end, the function would look really close to the one for jQuery UI, just changing slightly:
// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {
// traverse all the required elements looking for an empty one
$("#myForm input[required='required']").each(function() {
// if the value is empty, that means that is invalid
if ($(this).val() == "") {
// hide the currently open accordion and open the one with the invalid field
$(".panel-collapse.in").removeClass("in");
$(this).closest(".panel-collapse").addClass("in").css("height","auto");
// stop scrolling through the required elements
return false;
}
});
});
You can see it working on this JSFiddle: http://jsfiddle.net/ma8v32ug/2/
This is probably all kinds of bad user-experience, but I don't know much about that so I won't go into it XD Basically, as you can tell just from the practicality issues you're facing as the programmer, hiding required fields is bad.
I would suggest implementing validation yourself, such as in change events. Check for the validity of all input elements within that accordion section, and if any of them fail you can put a warning flag on the accordion's header bar and disable the submit button.
Only when all fields pass validation do you then enable the submit button and allow the user to continue.
Of course, this does defeat the purpose of the native validation that HTML5 provides, but you're already using non-native accordions so you kind of have to go non-native for your validation to work.
Problem with browsers Auto suggestions.
For example prefilling the user's address based on earlier user input...
Some conditions
autocomplete="on".
i am using "jQuery Validation Plugin 1.11.1".
I am filling the wrong data and click the submit, form validations trigger
next i filled date with browsers Auto suggestions this case form
validations not trigger. Any buddy know update the solution. [Fiddle][1].
First click the submit button next enter the values you observe.
next time click auto suggestion or auto complete -> error message still exit up to focus out...
[2]: http://jsfiddle.net/thiru715/57oyLjzh/2/
` `
[1]: http://i.stack.imgur.com/PDJv8.png
The validation for each field happens when you get out of that field (blur) and on other events (keyup, form submit...)
You'd have to hack it to work, for example, customize your jQuery code so that whenever you leave any field (and thus autocompletation can have happened) the validation is trigerred for all the fields.
See this to learn how to manually trigger the validation.
You can also try to do it using the change event. I'm not sure if it will work.
Please, add this to your fiddle and test it:
$("#registerform input").change(function() {
$(this).valid();
});
I'm not able to test it, because I cannot trigger the autocomplete.
If it doesn't work, try this:
$("#registerform input").blur(function() {
$("#registerform input").valid();
});
I use jQuery form validation plugin. I have got a webpage with "save" button and tabs. there is a form in one tab. Here is code for "save" button.
$("#save").click(function(){
$("#optionalform").valid();
});
It validates form if the tab with "#optionalform" selected. If it is not selected validation doesn`t work.
What you need to do is specify that hidden elements should not be ignored:
$("#optionalform").validate({
ignore:''
});
The default for the ignore option is ':hidden' which includes all the elements of your form, except when that tab is visible.
See it in action here: http://jsfiddle.net/ryleyb/NfmWW/