0

I'm using the jQuery Validation Engine. I want the erroneous form field to be highlighted in red, as well as displaying the tooltip-error message. I think I can do this using jQuery's addClass.

My plan is to add a class 'error' to any input field that is rignt after the div.inputCreditCardformError (that is the div that holds the tooltip-error message. It appears when the field does not validate, and goes away once the field does validate.

My question is: will this added class disappear when the div.inputCreditCardformError disappears? Or will the added class stay in the page for the life of the page?

Improve this question
2
  • well, have you tried it? Commented Sep 5, 2012 at 19:16
  • Thank you for adding the jQuery-validation-engine tag, Charles! Commented Sep 5, 2012 at 20:26

3 Answers 3

Reset to default
3

You don't need to modify the jQuery Validation Engine code to add form field highlighting. You can use the following options when initialising the validation engine: addFailureCssClassToField and addSuccessCssClassToField.

E.g:

$("#myForm").validationEngine({addFailureCssClassToField: "inputError"});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

If you use .addClass('error'), that class will remain. You will need to place a .removeClass('error') in the code to remove the class after the field is valid. I didn't look through the code, but it should go along with the code that removes the tooltip window.

Improve this answer

5 Comments

Hi Andrew, I'm new to jQuery, so don't completely understand your answer right away - but I'll work with it and if I have any further questions, I'll come back and ask. Thanks! (I'm probably going to ask another JavaScript-knowledgeable person, but I've been advised to minimize my use of his time, so I'm trying to do as much as I can on my own. Thank you for your assistance - this lets me know that I have to add the removeClass, and were it will need to go / how it will need to be triggered. Thanks.
Sounds good. Basically, if you modify the plugin to do .addClass() if there is an error, it also has to be modified to do a .removeClass() when the element does validate.
Thanks again. I've found in the jQuery Validation Engine code where I think I'll need to include the .addClass() stuff, and I think I've found where the tooltip divs are removed. I'm going to try it out myself for the rest of the day and part of tomorrow, and ask for assistance when I've gone as far as I can and can't make headway after a few more hours of research and attempts-at-things. Thanks again.
Here's the code that creates the prompt on the non-validating field:
Let me try again: 'init: function(options) { var form = this; if (!form.data('jqv') || form.data('jqv') == null ) { options = methods._saveOptions(form, options); // bind all formError elements to close on click $(".formError").live("click", function() { $(this).fadeOut(150, function() { // remove prompt once invisible $(this).parent('.formErrorOuter').remove(); $(this).remove(); }); }); } return this; },' To append the class name error to the nonvalidating input field, would I put 'addClass('error')' in there somewhere?
0

Try this,

jQuery("#formID").validationEngine('attach', {addFailureCssClassToField: "inputError",promptPosition : "topLeft"});

.inputError{
    border: 2px solid #000;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.