Asterik before required fields
Permalink
Hi! Easy question – Easy answer (I hope)
I´m building a form extension where some fields are marked as required with:
Is there any build in concrete5 way I can show the asterik at the required fields?
Cheers,
micrdy
I´m building a form extension where some fields are marked as required with:
$val->addRequired('zip', 'ZIP cannot be empty.');
Is there any build in concrete5 way I can show the asterik at the required fields?
Cheers,
micrdy
anybody?
I am assuming you are not using the core forms block or an existing forms addon.
Some css frameworks and c5 themes include such a 'required' marker for required fields. Some jQuery validation plugins include such a 'required' marker for required fields.
Otherwise its up to you.
Some css frameworks and c5 themes include such a 'required' marker for required fields. Some jQuery validation plugins include such a 'required' marker for required fields.
Otherwise its up to you.
Hi John
Thanks for your quick response. No I´m using the C5 form helper. I´ll add this feature to the helper function and post a pull on github. I think many developers would need this.
Thanks for your quick response. No I´m using the C5 form helper. I´ll add this feature to the helper function and post a pull on github. I think many developers would need this.
OK, I see.
If its a dashboard page the form is on, there are already bootstrap attributes for marking required fields. You can specify them in the form field extra data array.
That is also probably the best way to do it for a front-end form. Use the extra data array to specify element attributes that javascript/css uses to display placeholders, required markers etc.
If its a dashboard page the form is on, there are already bootstrap attributes for marking required fields. You can specify them in the form field extra data array.
That is also probably the best way to do it for a front-end form. Use the extra data array to specify element attributes that javascript/css uses to display placeholders, required markers etc.
Well, you are right. I have not thought about the third parameter. But it would be nice, if the asterisk is automatically added after you call the addRequired function in validation helper. I´m gonna implement this.
Only nice if you want it, but not nice if you don't and it comes out automatically. Definitely would need to be an "optional" flag that you set like $outputAsterix = false. Set to true if you want it.
The problem with this sort of thing is it's so rare it actually fits what is needed for a specific site. Like do you output before or after the field? Some might want it to display in the label.
I think the best solution is to make sure the class "required" is set on the wrapping div of the field. Not sure if that's the case now. I've been pushing various "wrap with classes" and they usually get accepted. The point is if you have the class set, then you can do whatever you need to display with CSS. It may not be as automatic as what you're thinking but it's more versatile to use CSS :after or :before like:
div.required label:after {
content: #whateverTheCodeIsForAsterix!?
}
The problem with this sort of thing is it's so rare it actually fits what is needed for a specific site. Like do you output before or after the field? Some might want it to display in the label.
I think the best solution is to make sure the class "required" is set on the wrapping div of the field. Not sure if that's the case now. I've been pushing various "wrap with classes" and they usually get accepted. The point is if you have the class set, then you can do whatever you need to display with CSS. It may not be as automatic as what you're thinking but it's more versatile to use CSS :after or :before like:
div.required label:after {
content: #whateverTheCodeIsForAsterix!?
}
Here is a discussion about methods for adding asterixes this http://stackoverflow.com/questions/11197671/use-css-to-automaticall...
And turns out no need for code to display asterix using :after or :before so this works:
http://jsfiddle.net/erqrN/1/
That thread also mentions using images instead of asterix. Yet another one of a dozen or more ways to do this which is why I really think just make sure the wrapping div for the field has "required" class and then use CSS to apply whatever you want. And some C5 themes might have styles for that too (hopefully?!).
And turns out no need for code to display asterix using :after or :before so this works:
http://jsfiddle.net/erqrN/1/
That thread also mentions using images instead of asterix. Yet another one of a dozen or more ways to do this which is why I really think just make sure the wrapping div for the field has "required" class and then use CSS to apply whatever you want. And some C5 themes might have styles for that too (hopefully?!).
