validate plugin - error message styling and refocus difficulties
Hi Team, - please be gentle I'm trying to get upto speed all all these technologies :-)
I am configuring an enrolment form which is currently built with bootstrap form classes ( we are using latest bootstrap v3 and latest jquery). I have successfully added the validate plugin and have my various rules are all working fine. I even have small glyphicons appearing on successful or unsuccessful validation of the field. However, the message text is very small italics in the default grey font, and I have no changes applied to my invalid field, and I have no refocus of the cursor into the failing field. I have trawled the internet and found numerous partial solutions but I cannot get any of them to work .. and its time for some serious help. It appears that all the "highlight" and "unhighlight" classes are being added correctly looking at the page inspector but visually there is no change of colour at all. What I would like to happen is for the error message to be displayed in a larger font and in red; for the field to have a red (or bootstrap danger pink) background and the cursor to be focused back in the field for the user to try again. I'm sure this sort of thing must have been done many times but I'm not really sure where to start?
Any pointers/pseudo code would be much appreciated,
Thanks, Paul
I am configuring an enrolment form which is currently built with bootstrap form classes ( we are using latest bootstrap v3 and latest jquery). I have successfully added the validate plugin and have my various rules are all working fine. I even have small glyphicons appearing on successful or unsuccessful validation of the field. However, the message text is very small italics in the default grey font, and I have no changes applied to my invalid field, and I have no refocus of the cursor into the failing field. I have trawled the internet and found numerous partial solutions but I cannot get any of them to work .. and its time for some serious help. It appears that all the "highlight" and "unhighlight" classes are being added correctly looking at the page inspector but visually there is no change of colour at all. What I would like to happen is for the error message to be displayed in a larger font and in red; for the field to have a red (or bootstrap danger pink) background and the cursor to be focused back in the field for the user to try again. I'm sure this sort of thing must have been done many times but I'm not really sure where to start?
Any pointers/pseudo code would be much appreciated,
Thanks, Paul