Add switch for showArrow to general options about jquery-validation-engine HOT 12 CLOSED

Could you please reformulate ? are you reporting a bug or a suggestion ?
Please explain in proper english.

Thank you.

from jquery-validation-engine.

Feature request.

I would like a flag, showArrow, in the options object passed to actions. This would do the same thing that the similarly named flag in showPrompt does.

It would be nice if changing away from the default prompt position didn't cause the arrow that is pointing towards an erroneous field entry to go away.

e.g. When you specify no promptPosition you get the prompt above the field with an arrow pointing at the field. However, once you change the position to let say centerRight, you lose the arrow pointing towards the field.

Arrow:
jQuery('#adminForm').validationEngine('init');
No Arrow:
jQuery('#adminForm').validationEngine('init',{promptPosition : "centerRight", scroll: false});

Apologies if I have missed the option that allows this. I see it for showPrompt but none of the action options.

from jquery-validation-engine.

got it.. looks like a bug to me.
Will try to reproduce the error before the end of the week.

from jquery-validation-engine.

haven't had time to work on this one, sorry. will look into it once I can free up some time.

from jquery-validation-engine.

I could not get the arrows to appear on any of the error messages with this new version until I changed line 140 back to:

        if(!promptPosition)
            options.promptPosition=promptPosition;
        options.showArrow = showArrow===true;

I think there may be a bug in the new version that impairs the showing of arrows. I am not sure of all your logic in this section. I found it by comparing it with version 2.0 which did have the arrows. I may not be specifying the arrows properly, as I was relying on the default of showing an arrow. I also am a bit worried about the lack of brackets {} around the logic intended to be executed by the if statement. Seems it could be ambiguous as to what would be done if the statement is true.

There may also be a bug in closing the error prompt when you change the state of a select or radio button after validation when the user has forgotten these form values. I put an onclick action on these form elements to close the error message to work around this.

Sometimes I have to put special on-submit conditions to check the combobox entries because they will cause the error prompt to come up, but not prevent form entry.

I want to thank you...you have, by far, the finest form validation for jQuery available on the web. Your solution should be the standard in the jQueryIU site. It looks better, works better, and is better documented. Please see it in action on www.tripinsurance.com. I have integrated it with datepicker, combobox, and field masking, and it works great...

from jquery-validation-engine.

Yea I saw some inconsistencies in the ajax part as far as showarrow is concern (where it was not showing and should), we might have to think about rewriting this part.

from jquery-validation-engine.

I also noticed that Combobox and Select in the jQueryUI library really cause problems with the Validation Engine. I had to use on submit routines and show prompt to verify these components by hand.
thanks,
Dan

On Jun 27, 2011, at 6:22 AM, posabsolute wrote:

Yea I saw some inconsistencies in the ajax part as far as showarrow is concern (where it was not showing and should), we might have to think about rewriting this part.

Reply to this email directly or view it on GitHub:
#67 (comment)

from jquery-validation-engine.

will try to make time to check the arrow issue

from jquery-validation-engine.

I'm missing the arrows with the centerRight option too! Thx.

from jquery-validation-engine.

I think showPrompt should actually look like this:

        showPrompt: function(promptText, type, promptPosition, showArrow) {

            var form = this.closest('form');
            var options = form.data('jqv');
            // No option, take default one
            if(!options) options = methods._saveOptions(this, options);
            if(promptPosition)
            {
                options.promptPosition=promptPosition;
                options.showArrow = showArrow==true;
            }

            methods._showPrompt(this, promptText, type, false, options);
            return this;
        },

With the showArrow code INSIDE the check to see if the user passed in the promptPosition otherwise if someone does:

.validationEngine('showPrompt', rules.required.alertText, 'error')

it would ignore the default settings and just turn off the arrow.

from jquery-validation-engine.

to make the confusion about arrows complete:
It's not possible to turn the arrows off, because within _validateField any preset value is overwritten:

options.showArrow = true;

https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/jquery.validationEngine.js#L511

Would be great if a global disabling would be possible...

from jquery-validation-engine.

We did some changes in javascript and css to fix this (we did it only for centerRight, but it can be applicalble to other positions):
js

case "centerRight":
                        arrow.html('<div class="line2"><!-- --></div><div class="line3"><!-- --></div><div class="line4"><!-- --></div><div class="line5"><!-- --></div><div class="line6"><!-- --></div><div class="line7"><!-- --></div><div class="line8"><!-- --></div><div class="line9"><!-- --></div><div class="line10"><!-- --></div>');
                        prompt.append(arrow);
                        arrow.addClass("rightPosArrow");
                        break;

And we made space for it by changing this line:

//promptleftPosition= fieldLeft + field.outerWidth(true)  + 5;
                    promptleftPosition= fieldLeft + field.outerWidth(true) + 13;

Also, we did some changes to css:

.formError .formErrorArrow.rightPosArrow { position: absolute; top: 4px; left: -9px; margin: 0; width: 15px;}
.formError .formErrorArrow.rightPosArrow .line10 { width: 1px; height: 15px;}
.formError .formErrorArrow.rightPosArrow .line9 { height: 13px; width: 1px;}
.formError .formErrorArrow.rightPosArrow .line8 { height: 11px; width: 1px;}
.formError .formErrorArrow.rightPosArrow .line7 { height: 9px; width: 1px;}
.formError .formErrorArrow.rightPosArrow .line6 { height: 7px;}
.formError .formErrorArrow.rightPosArrow .line5 { height: 5px;}
.formError .formErrorArrow.rightPosArrow .line4 { height: 3px;}
.formError .formErrorArrow.rightPosArrow .line3 { height: 1px; border: medium none;}
.formError .formErrorArrow.rightPosArrow .line2 { height: 1px; border: medium none; }
.formError .formErrorArrow.rightPosArrow .line1 { border: medium none; height: 1px; width: 1px;}
.formError .formErrorArrow.rightPosArrow div { border-left: 0; border-right: 0; border-left: 0; border-top: 1px solid #000000; border-bottom: 1px solid #000000; display: inline-block; vertical-align: middle;  background-image:url(../images/overlay-bg.png); background-color: transparent; box-shadow: 0 0 3px #000000 !important; width: 1px !important;}, we added some css for that arrow:

Credits to my colleague Sasa.

from jquery-validation-engine.