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
Related
I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace
Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");
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.
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.
I have recently completely recoded my site registration form, a lot of my users were complaining that upon registration, they would fill out the form only to be told that the username was already taken, or some other error that meant they would have to retype all of that information.
I set off today designing and coding the new registration page, and the resulting response from my users is that it looks more user friendly, and when the "live" validation is included, it will be just right.
Anyway, here is how my registration page looks, with the location of the divs that will contain errors;
For each area of the form, I have added the same div class next to it, which I hope I can then hide / unhide depending on what the user has typed in.
My issue is, surely if I use that same class for ALL of the fields, it will update ALL of the error fields when I use something like the innerHTML function?
jQuery is far from my strong point, and I would really appreciate any help. I will add more information if it is requested, thanks!
Why not give each field an id and use the selector #whatever instead of .whatever to access each specific field?
basically you validate on events like keyUp or blur and when the validation finished you traverse the proper div by going up from the input element to the element that contains both, the input and the error div and then search for the error div by it's class. this way you'll be sure to only avitvate the error for the proper element.
assuming the element surrounding the input and error div (and propably label etc.) has the class element and the error div has the class error
$('input').blur(function() {
// on error:
$(this).parents('.element').find('.error').text('Some error occured').show();
});
if you validate using ajax the on-error stuff needs to be in the ajax callback ofc...
also need the same routine for successful validation: remove text and hide error div...
I am using the bassistance jQuery plugin validation.
I have a drop down list with 2 values.
If the first value is selected by the user a valid date field needs to be populated and if the second option is selected then a textbox needs to be filled with some text.
If nothing is selected then it need to return a validation on this as well
How can I achieve this?
thanks
Well, if it is a dropdown, you can't really have "nothing" selected. So, it sounds like in your case, you might want to make three options, the first of which is something like "Choose one", you can then you the jQuery to test for this condition and throw an alert if that value isn't one of the two that trigger an action. You can then force them to go back and choose of the two other options.