asterisk behind input field instead of behind label

Hi,

First of all thanks for making: "How can I identify 'required' inputs?"
http://www.chronoengine.com/faqs/2702-how-can-i-identify-required-inputs.html


I changed the code a bit to replace the asterisk with an triangle warning image which then looked like this:


I also let if float right cause it looked chaotic as you can see above in the picture.
This is the code:

label.cf_required span:after{
  content:url(http://www.domain.com/images/warning.png);
  padding-right: 10px;
  float: right;
}
label.cf_required span{
  font-size: 0px !important;
}

Now with this the code above the triangle is shown in front of the input field.


Is there a way that the span asterisk is moved behind the input field.
That way the triangle is always show behind the input field and it will look better.

Any help is highly appreciated.

Greets

Hi SAGO,

Well, maybe you can change this line:

 label = el.getParent().getFirst('label');

to

 label = el.getParent().getFirst().getNext();

not tested though!🙂

Regards,
Max

Couple of quick questions on the original FAQ and this subsequent modification.

I have applied the original to my form and I would like to remove the asterisk and rely on simply CSS highlighting (more on why later). The box margin is good but I also like the idea of the images as SAGO has done here.

Now comes the hard part. I know little or nothing about JS coding and I'm certainly green when it comes to the DOM etc. so, while stuff like this is going to help me along the way my questions may be simple. Apologies if so.

Q0

I presume that the addition of the text to the label is done with the line
label.grab(marker.clone(), 'bottom');

Which I'm guessing is creating a new copy of the temp marker object defined in the code and attaching it to the end of the label. Presumably the 'bottom' is something to do with where how the label is actually represented.

So...
Is it safe to remove this line and the marker definition in the code and the rest of it simply ensures that required elements get a class cf_required added to them?
Yes and I'm good to go.

However for interest, as the original code didn't quite work properly...
Subsequent questions are:

Q1 - I had the behaviour in Firefox, when the first time the form was entered in a session it all displayed fine. Second and successive times when entering I got double asterisk strings i.e. " *". Is this a Firefox issue or the code?

Q2 - I also observed behaviour for a text area on the form that the CSS highlight bar was correct but when mousing over the area, it was lost until mousing out. Can this be corrected easily? If so, how?

Q3 - When looking at the code and trying to understand, I noticed that there is a difference in the strings for single and group elements (??). This may be correct but just seemed a little odd. Is the following line actually correct or could it be assisting with the double asterisk?
if(cl !== null && (cl.contains("validate['required'") || cl.contains("validate['group["))) {

Many thanks for any pointers.

Hi,

Various comments to add here.

First: I have updated the FAQ to show how to add images before and after the label using the same JavaScript but with different CSS (basically it uses the :before and :after pseudo elements to show the images).

Second: I haven't yet been able to place images after the elements. A similar approach should work but so far I haven't got it to display the images in the form. Max's suggestion is close but will need tweaking a bit for the case where there are ghost elements in radio or checkbox groups.

Third: I can't replicate the problems that Rapple is seeing with double asterisks and moving bars. This is most likely an interaction with some other CSS and/or JavaScript on the page :-(

Fourth: @Rapple You can remove the 'Marker' code block at the beginning and the line near the end where it is applied (or as safer fix you could just set the line html: '', so that nothing is shown.

Fifth: @Rapple I don't understand your concern in Q3. The code goes through all the inputs looking to see where 'required' classes have been required. The checkbox and radio groups are treated differently because the class is applied to the label for the whole group, not to individual elements. I'm pretty certain that the selector script is OK - but, as I said above, I don't see any double asterisks. Note that the code may well not work if you aren't using the default ChronoForms HTML.

Bob