Login Retreive lost passwordRegister
Search

Forum Index / NL Forum / style-class error

[ This topic is solved ]

  John Doe 28 December 08 / 19:08  
Is het ook mogelijk om in het geval van een error de betreffende regel van een class="error" of iets dergelijks te voorzien? Ik zou namelijk (onder andere) graag een rood randje om de velden heenzetten in het geval van een error.

  Johan Wiegel (Admin) 28 December 08 / 22:23  
volgens mij is dit standaard al het geval.

  John Doe 01 January 09 / 16:03  
Voor zover ik kan achterhalen helaas niet. Er staat wel een <span class="error"> achter het formfield, maar het formfield zelf en/of de omliggende TR/TD is niet te stylen. Ook via $form->setmask() is hier voor zover ik kan zien geen oplossing voor ingebouwd.

  Johan Wiegel (Admin) 01 January 09 / 16:36  
Sorry,
ik had je vraag niet goed gelezen.
inderdaad is dat niet mogelijk.

Johan

  John Doe 06 January 09 / 11:24  
Komt hier misschien nog een oplossing voor? Het liefst instelbaar via setMask of iets dergelijks, maar eventueel standaard in het form element is ook prima:

<input type="text" class="error">

Ik kan me zo voorstellen dat dit iets is waar zeer veel mensen wat aan zullen hebben.

  Johan Wiegel (Admin) 06 January 09 / 11:31  
Voorlopig komt hier geen oplossing voor.
(zou ook niet 123 weten hoe dit op te lossen)

  John Doe 07 January 09 / 11:27  
Changed at 07 January 09 / 11:37
Na enig stoeien heb ik een mogelijke oplossing weten te maken. Het idee is om in het masker de speciale variabele %error_style% toe te voegen aan het HTML-element waaraan men de class="error" wil toevoegen. De betreffende functie zorgt er vervolgens zelf voor dat deze op de juiste manier wordt ingevoegd, zodat er geen dubbele class="..." in een bepaald element voorkomen.

<?php

// Voorbeeld 1

$mask '<tr class="foo bar" %error_style%>
<td valign="top" align="right">%title%</td>
<td valign="top">%seperator%</td>
<td valign="top">%field% %help% %error%</td>
</tr>'
;

echo 
parse_error_style($mask);

// Voorbeeld 2

$mask '<tr %error_style%>
<td valign="top" align="right">%title%</td>
<td valign="top">%seperator%</td>
<td valign="top">%field% %help% %error%</td>
</tr>'
;

echo 
parse_error_style($mask);

?>


Resultaat in browser (bron weergeven!)

// Voorbeeld 1

<tr class="error foo bar">
<td valign="top" align="right">%title%</td>
<td valign="top">%seperator%</td>
<td valign="top">%field% %help% %error%</td>
</tr>

// Voorbeeld 2

<tr class="error">
<td valign="top" align="right">%title%</td>
<td valign="top">%seperator%</td>
<td valign="top">%field% %help% %error%</td>
</tr>


Te bewerkstelligen met de volgende functie

<?php

function parse_error_style($mask) {
    
// Get element containing %error_style%
    
$pattern '/<[^<>]*%error_style%[^<>]*>/';

    if (
preg_match($pattern$mask$result)) {
        
$element $result[0];
        
        
// Check if class-attribute already exists in element
        
if (preg_match("/class=\"[^\"]*\"/"$element)) {
            
// Class-attribute exists; add style
            
$pattern = array('/class="/''/\s*%error_style%\s*/');
            
$replace = array('class="error ''');
            
$new_elem preg_replace($pattern$replace$element);
            
$mask str_replace($element$new_elem$mask);
        } else {
            
// Class-attribute does not exist; create it
            
$new_elem preg_replace("/%error_style%/"'class="error"'$element);
            
$mask str_replace($element$new_elem$mask);
        }
    }

    return 
$mask;
}

?>

  Johan Wiegel (Admin) 07 January 09 / 11:38  
Ik snap wel waar je heen wilt, maar weet niet of dit wel zo gewenst is.

Wat nu als ik een heel andere mask gebruik. waar in meer elementen het class attribute aanwezig is? dan wordt overal de class error aan toegevoegd.

Voor als nog zie ik het niet als geschikte oplossing om mee te leveren.
Het is te specifiek voor jou toepassing. Je kunt het natuurlijk wel in een eigen extend gebruiken.

  John Doe 07 January 09 / 11:42  
Changed at 07 January 09 / 11:44
Het is juist toepasbaar in elk soort mask, omdat het dus analyseert of er al een class="" in het betreffende element aanwezig is. Kijk maar eens naar het verschil tussen voorbeeld 1 en voorbeeld 2.

  Johan Wiegel (Admin) 07 January 09 / 11:59  
ik zal het nog eens bestuderen als ik weer aan FH ga werken.
Voorlopig te druk met andere zaken

  Johan Wiegel (Admin) 09 January 09 / 12:09  
heb het uitgebreid getest.
Is inderdaad wel generiek inzetbaar, zal dit in de volgende release meenemen.

  John Doe 09 January 09 / 13:08  
Geweldig!!! Hartelijk dank.

  Johan Wiegel (Admin) 24 February 09 / 15:16  
Zit in FH3 v1.2.8

  John Doe 31 July 09 / 11:51  
Het werkt geweldig!

Is het wellicht mogelijk om deze techniek ook in te zetten in het input field zelf??? Nu werkt het namelijk alleen op de omliggende mask, het formfield zelf krijgt die class="error" niet mee.

  Johan Wiegel (Admin) 17 August 09 / 08:53  
lijkt me genoeg om dit in de mask te doen, met nested css kun je dan ook je formfield stylen, ik zie hier niet echt een toegevoegde waarde.

  John Doe 25 August 09 / 12:58  
Changed at 25 August 09 / 13:07
Ik ben het met je eens. Echter, heel af en toe gebruik ik een lege mask; om bijvoorbeeld een postcode en woonplaats op dezelfde regel te plaatsen.


<div class="fieldWrapper">
    <label for="postal">postcode, plaats:</label>
    <input type="text" name="postal" id="postal" value="1234 AB" class="text xs" />
    <input type="text" name="city" id="city" value="Amsterdam" class="text m" />
    <img src="img/icons/help.png" width="16" height="16" alt="" class="tooltip" title="Help" />
</div>


In het geval van een error in één van beide fields, zouden ze beide een rode rand krijgen. Dit is natuurlijk niet de bedoeling.

NB: Het is bovendien makkelijker inzetbaar voor de mensen die niet diep in de documentatie van FormHandler duiken om te achterhalen hoe ze met %error_style% om moeten gaan. Implementatie op deze wijze zou immers altijd correct werken.

  Johan Wiegel (Admin) 25 August 09 / 15:21  
Tja, ik ben het ook met jou eens maar is het dan niet beter het allen op het input field te doen?
wordt anders wel een beetje erg dubbel op, aan de andere kant kan het ook niet echt kwaad, want de %error_style% kunje weg laten.

ik denk er nog even over na ..........

  John Doe 30 August 09 / 10:37  
Voor maximale ondersteuning zou de dubbel-op-variant denk ik de beste optie zijn.

De inline variant (dus in het input field) zal dan standaard aanwezig zijn en derhalve de meest gebruikte optie gaan worden. Voor extra functionaliteit van FormHandler kan diegene die daar behoefte aan heeft, zijn mask nog eens uitbreiden met %error_style%. In sommige ontwerpen is het fijner om bijvoorbeeld een rood randje om het hele kader te plaatsen, i.p.v. uitsluitend om het input field.

Dat valt dan alleen te bewerkstelligen in de dubbele variant. (die dan eigenlijk zo dubbel nog niet is, zolang je de %error_style% weglaat)

  Johan Wiegel (Admin) 30 August 09 / 11:11  
endat is precies mijn overweging geweest toen ik dit afgelopen week heb gemaakt. Bij de volgende uitgave zit dit erin.

  John Doe 02 September 09 / 14:29  
"Great minds think alike"

thanx!

  John Doe 07 September 09 / 19:23  
Ik merk op dat ontzettend veel gebruikers standaard al een speciale class aanmaken, afhankelijk van de naam van het input-field. Dat wil zeggen:

<input type="text" class="text />

etcetera. Dit is vanzelfsprekend om het gebrek aan ondersteuning in CSS van bijv. input[type=text] op te vangen in de iets oudere browsers. IE6 ondersteunt dit niet, maar ook IE7 zonder doctype niet. Kort samengevat is het een goed iets om elk form element een extra class mee te geven.

Gezien de mogelijkheid om 'error' dynamisch in te voegen, is het wellicht ook een idee om op diezelfde manier 'text', 'radio', 'checkbox', etc. toe te voegen aan de verschillende form elements????

  Johan Wiegel (Admin) 07 September 09 / 19:46  
dat vindt ik dus niet, daarvoor heb je het extra argument in de functie

  John Doe 08 September 09 / 11:05  
Hmmm jammer.

Is er een mogelijkheid voor mijzelf om dit te standaardiseren? Binnenkort moet ik namelijk een formulier maken met ongeveer 200 velden; en om nou 200 keer 'class="text"' aan de php-code toe te voegen is ook weer zo wat...

  Johan Wiegel (Admin) 08 September 09 / 11:07  
Changed at 08 September 09 / 11:09
Volgens mij moet je dan eens goed na gaan denken hoe je je style definieert.

je kunt je form een id geven en dan de inputs binnen dat id toch gewoon stylen?

Denk dat je de verkeerde kant op zoekt.

Je kunt element op genoeg manieren benaderen in css dat dit niet nodig is.

  John Doe 09 September 09 / 16:32  
In moderne browsers kun je inderdaad via CSS onderscheid maken d.m.v.:

input[type=text]
input[type=checkbox]
input[type=radio]
input[type=submit]
input[type=button]
input[type=reset]

In IE6 en lager, maar ook in IE7 in het geval van een ontbrekende DOCTYPE, ziet de parser geen verschil in al die verschillende input-elementen. Het is in de meeste gevallen wel wenselijk om dergelijke elementen afzonderlijk te kunnen stijlen. Bijvoorbeeld: een checkbox hoeft immers in de meeste gevallen geen border, waar een text-field dit vaak wel heeft.

Omdat dit niet werkt voor de oudere browsers, zul je dus je elementen een extra type-class moeten geven:

<input type="text" class="text" />
<input type="checkbox" class="checkbox" />

etc.

Of zie ik nu iets verkeerd?

  Johan Wiegel (Admin) 09 September 09 / 16:39  
Je hoeft toch alleen en class toe te voegen aan de input velden die afwijken?

hoeveel checkboxen en of radio buttons heb je nu helemaal en ook de buttons ik zie echt het probleem niet

eventueel kun je zelf in de class.CheckBox.php een class aan het element toevoegen, maar dan kun je niet eenvoudig een nieuwere versie neer zetten.

(en zo ook voor andere velden.)

Ik maak heel wat formuliertjes met FH, en zelfs in compleet door designers uitgewerkte layouts, ik heb dit nog nooit als probleem ervaren.

  John Doe 09 September 09 / 16:58  
Voor text-fields is het inderdaad overbodig, je hebt gelijk.

Echter, ik vind het belangrijk om opmaak van php-code te scheiden, vandaar dat ik zoveel mogelijk opmaak-gerelateerde dingen standaardiseer. En zolang IE6 nog in omloop is, MOET deze class-toevoeging gehandhaafd worden.

Omdat dit toch wel de meest gebruike methode is ten aanzien van het ondersteunen van oude browsers (zelfs geadviseerd door W3C), leek me dit wel een prima optie om aan FormHandler toe te voegen. Inderdaad dan alleen voor de checkboxes, radiobuttons en de verschillende buttons.

Maar helaas, ik heb je niet kunnen overtuigen :-)

In ieder geval bedankt voor het meedenken.

  Johan Wiegel (Admin) 09 September 09 / 17:32  
geen ie6 meer ondersteunen ;-)

  John Doe 11 September 09 / 11:29  
Grote en logge organisaties hebben zich te houden aan afspraken van hogerhand; even snel een browser of windows-versie updaten zit er meestal niet in. XP en IE6 zullen bij die doelgroep derhalve nog wel een aantal jaren de standaard blijven.

  Johan Wiegel (Admin) 09 October 09 / 09:27  
Class error wordt nu ook aan het veld zelf gehangen

FH3 v1.2.10

  John Doe 01 December 09 / 17:20  
Hey! Hij hangt de error-class uitsluitend aan een textField. Zou het mogelijk zijn om het ook aan een SELECT en TEXTAREA veld te koppelen?

  Johan Wiegel (Admin) 01 December 09 / 18:01  
aanpassing gemaakt, select en textarea worden ook van de class voorzien.
ff opnieuw downloaden

  John Doe 07 December 09 / 10:28  
In FH/fields/class.CheckBox.php op regel 227 is de label-tag voorzien class="noStyle". Deze class ontbreekt echter in FH/fields/class.RadioButton.php op regel 157, die in principe op eenzelfde wijze zou moeten werken. Is het mogelijk deze class alsnog aan de betreffende label-tag toe te voegen?

  Johan Wiegel (Admin) 07 December 09 / 11:28  
Die hoort er eigenlijk helemaal niet, is een overschot van onze eigen omgeving.

Kun je makkelijk zelf aanpassen, ik zal hem in de volgende download toevoegen.

  John Doe 19 August 10 / 18:20  
Er is een fout in de style-class convertie geslopen:

<input type="text" name="postal" id="postal" value="" size="20" maxlength="7" class="s" />


Resulteert bij een error in:

<input type="text" name="postal" id="postal" value="" size="20" maxlength="7" class=error "error s" />

  Johan Wiegel (Admin) 19 August 10 / 18:55  
Thanx fout gevonden en verholpen.

  John Doe 19 August 10 / 19:37  
Changed at 02 October 10 / 17:14
Thanks! Ik heb nog wat verbeteringen weten te realiseren. In de bestaande situatie zou 'class=test' resulteren in 'class=error class=test'. Omdat dat niet W3C is, bleef me dat toch dwarszitten. Het resultaat is als volgt: (gebaseerd op de versie die je zojuist online hebt gezet)

Vervang regel 1410:
if( preg_match( '/class=(("[^"]+")|(\'[^\']+\')|(\w+))/', $element ) )


Vervang regel 1413 + 1414
$pattern = array( '/class="([^"]+)"/', '/class=\'([^\']+)\'/', '/class=(\w+)/', '/\s*%error_style%\s*/' );
$replace = array( 'class="error ${1}"', 'class=\'error ${1}\'', 'class="error ${1}"', '');


Vervang regel 1442
if( preg_match( '/class=(("[^"]+")|(\'[^\']+\')|(\w+))/', $field ) )


Vervang regel 1445 + 1446
$pattern = array( '/class="([^"]+)"/', '/class=\'([^\']+)\'/', '/class=(\w+)/' );
$replace = array( 'class="error ${1}"', 'class=\'error ${1}\'', 'class="error ${1}"' );


Tot slot: verwijder regel 1449 t/m 1455

  John Doe 19 August 10 / 21:32  
Changed at 02 October 10 / 17:14
"This form is automaticly being generated by FormHandler v3."

automaticly => automatically

  John Doe 02 October 10 / 17:15  
Mocht je je afvragen waarom mijn verbeteringen het niet deden. Ik zag net dat er een aantal tekens weg waren gevallen. Bij deze hersteld.

  Top


powered by PHP-GLOBE   © 2004 - 2012 FormHandler. All rights reserved.   -   Open source license