[IE] Problemen met submit button - disabled.

[MrVegeta]

Ik ben bezig met een vrij simpele site en nu heb ik voor het contact formuliertje een interessante Qaptcha methode gevonden, namelijk de gebruiker moet een balk van links naar rechts slepen voor de verzend button actief wordt. Dit werkt in Chrome prima maar in IE heb ik er wat problemen mee.

De submit knop heeft wanneer de balk niet versleept is de attribute "disabled", deze wordt verwijdert wanneer de balk naar het juiste punt is versleept.

Mijn submit button heeft 2 achtergronden, één voor wanneer de knop nog vergrendeld is en één wanneer die ontgrendeld is.

Cascading Stylesheet:

        .submit{
            margin-top: -45px;
            margin-left: 449px;
            border: 0px solid black;
            float: left;
            width:151px;
            height:27px;
            background:url('../images/content/button_verzend_ontgrendeld.png');
            margin-bottom:15px;
        }
        
        .submit:disabled{
                background:url('../images/content/button_verzend_vergrendeld.png');
        }

Zoals ik al zei werkt het prima in Chrome maar Internet Explorer trekt zich niets vaan van de disabled attribute.

Dit is de output van Internet Explorer

HTML:

<input name="submit" disabled="disabled" class="submit" type="submit"/>

En dit is de output van Chrome

HTML:

<input type="submit" value="" name="submit" class="submit" disabled="">

Het gaat om deze site,
http://no-illusions.nl/zangeres/contact.php

Wie weet hier een goede oplossing voor?

[posttoast]

Welke versie van IE? Ze kunnen namelijk niet allemaal even goed overweg met pseudoclasses (dus .submit:disabled).

Misschien moet je nog een echte class toevoegen met javascript: dus gewoon .disabled.

[Struikrover]

Ik zie trouwens dat je op dit moment op die link die je post gebruik maakt van een sprite. Waarom is dat geen optie als ik vragen mag?

[MrVegeta]

posttoast schreef op zondag 10 juli 2011 @ 14:40:
Welke versie van IE? Ze kunnen namelijk niet allemaal even goed overweg met pseudoclasses (dus .submit:disabled).

Misschien moet je nog een echte class toevoegen met javascript: dus gewoon .disabled.

Getest in IE8. En ik had al geprobeerd de attribute te veranderen maar weinig succes,

JavaScript:

/** Disabled submit button **/
            if(opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled','disabled');

Als ik hier .attr verander dan houd de "app" op met werken.

Struikrover schreef op zondag 10 juli 2011 @ 14:41:
Ik zie trouwens dat je op dit moment op die link die je post gebruik maakt van een sprite. Waarom is dat geen optie als ik vragen mag?

Omdat ik het in de verzendknop wil hebben en dat werkt via een background-image.

[Struikrover]

Ah, duidelijk, dat had ik zo snel over het hoofd gezien. Zoals hier te zien is ondersteunt IE8 deze pseudo-class niet. Omdat je toch al met javascript werkt om het schuiven te laten werken, is het misschien verstandig om daarmee een CSS class 'disabled' weg te halen op het moment dat het formulier verzonden kan worden? Desnoods maak je het zodat dit alleen bij versies van IE gebeurt.

[R4gnax]

Als onderdeel van de verificatie payload voor een captcha moet je een onderdeel hebben wat redelijkerwijs alleen door mensen geleverd kan worden, anders gaat de hele methode op geen enkele manier werken om spammers tegen te houden. Deze menselijke component heb je hier niet.

Verder is het ook een vreselijke keuze uit het oogpunt van accessibility. Traditionele captcha technieken gebaseerd op plaatjes kunnen voor blinden nog een audio cue hebben. Een non-visuele cue is hier niet mogelijk: je moet met een muis kunnen werken om de slider beet te pakken en te verslepen.

Kortom, degene die dit systeem verzonnen heeft, heeft absoluut 0.0% kennis van zaken.

[MrVegeta]

Dat vind ik wel een wat overdreven reactie. Hoe kan je nou zeggen dat de gebruikelijke bijna niet te lezen tekst wel een goede oplossing is? Ik heb het gevoel dat ik moet kiezen tussen 2 kwaad, en dit is de mindere.

Ik heb overigens geen zin in een discussie hierover

[ Voor 14% gewijzigd door MrVegeta op 10-07-2011 19:26 ]

[R4gnax]

MrVegeta schreef op zondag 10 juli 2011 @ 19:26:
Dat vind ik wel een wat overdreven reactie. Hoe kan je nou zeggen dat de gebruikelijke bijna niet te lezen tekst wel een goede oplossing is? Ik heb het gevoel dat ik moet kiezen tussen 2 kwaad, en dit is de mindere.

Ik heb overigens geen zin in een discussie hierover

'Bijna niet te lezen' is behoorlijk subjectief. Ik heb bijvoorbeeld geen enkele moeite met de meeste reCaptcha's en als er eens een keer iets vreemds tussen zit kun je om een andere vragen. Bij reCaptcha hoef je trouwens ook maar één van beide woorden correct in te vullen en ik vermoed dat er zelfs in dat ene woord nog met een Levenshtein distance gewerkt wordt, want vaak genoeg mag je toch nog een letter of twee fout hebben in langere woorden. Daarnaast heb je altijd nog de eerder genoemde audio cue die ook voor blinden gebruikt kan worden.

Met QapTcha's slider systeem heb je dat allemaal niet. Je bent overgeleverd aan het kunnen gebruiken van een muis èn het kunnen lezen van de instructies: in 8px donker rood op diep zwart zijn die nou niet bepaald leesbaar te noemen. (Vreemd dat je moeite hebt met de leesbaarheid van normale captcha's, maar dat hier dan weer laat varen.)

Daarnaast is deze 'beveiliging' letterlijk zo lek als een vergiet. Dus als je hem echt wilt blijven gebruiken hoop ik van harte dat je een uitleg voor je klant klaar hebt liggen wanneer de viagra spam begint te vloeien. Dat zou dan, heel eerlijk gezegd, de straf zijn voor het feit dat je nu je hoofd in het zand steekt.

[ Voor 17% gewijzigd door R4gnax op 10-07-2011 19:48 ]

[C0rnelis]

Een Google search levert binnen 5 minuten het gewenste resultaat

In je stylesheet, verwissel onderstaande code

Cascading Stylesheet:

.submit:disabled{
    background:url('../images/content/button_verzend_vergrendeld.png');
}

met

Cascading Stylesheet:

.submit[disabled]{
    background:url('../images/content/button_verzend_vergrendeld.png');
}

Mocht het hierna niet meer in bijv. Firefox werken, dan kan je er altijd nog van maken:

Cascading Stylesheet:

.submit:disabled, 
.submit[disabled]{
    background:url('../images/content/button_verzend_vergrendeld.png');
}

edit: http://www.developertutor...ed-text-boxes-in-css-404/

[ Voor 10% gewijzigd door C0rnelis op 10-07-2011 21:40 . Reden: Google Search result vermeldt ]

[MrVegeta]

Tjonge, ik heb serieus een hoop zoekpogingen gedaan maar niets gevonden. Maar dit is meteen goed.

Overigens wilde de klant deze manier graag gebruiken. Mochten er klachten komen zet ik het om naar een andere manier

[C0rnelis]

In dat geval: Googlen is soms ook een kunst . Ik had de volgende keywords ingetikt 'css ie 8 disabled form button'.

[R4gnax]

MrVegeta schreef op zondag 10 juli 2011 @ 21:54:
Overigens wilde de klant deze manier graag gebruiken. Mochten er klachten komen zet ik het om naar een andere manier

Ik zaag er misschien over door, maar er is één heel belangrijk ding wat je altijd in je achterhoofd moet houden: de klant heeft niet altijd gelijk. Als webdesigner of developer heb je de rol van een expert op dat gebied en sta je in een positie om een al te enthousiaste klant ook een beetje te sturen.

Wees proactief, denk vooruit en dek situaties af waar de klant misschien niet aan gedacht heeft. Dat kan al iets simpels zijn als een strategisch geplaatste opmerking in de trend van "Hebt u al gedacht aan [...]?" maar bij nijpender problemen moet je ook aan de bel trekken en durven zeggen "Dat is niet zo'n goed idee, want [...]", waarbij je technisch bewijs toont, samen met een uitleg of demonstratie.

Wees dit ook wanneer je al bent begonnen met de ontwikkeling van een project. Kom je daarbij zaken tegen waarmee je in de toekomst problemen voorziet, meld het dan. Je kunt bijvoorbeeld duidelijk maken dat je bij verdere analyse voorafgaand aan de integratie van een bepaalde techniek, er achter bent gekomen dat er bepaalde nadelen aan kleven die bezwarend tot zeer bezwarend kunnen zijn. Je kunt dan een tegenvoorstel indienen om met de klant te bespreken. Dat kan bestaan uit een aanpassing van de bestaande techniek, een gelijkwaardige andere techniek, etc.

Als een klant dan nog zijn oorspronkelijke visie aan wil houden, heb je in elk geval jouw bezwaar ter tafel gebracht en is het doorgesproken (en schriftelijk vastgelegd, ook belangrijk!), wat jou vrij spreekt als er later problemen mee opduiken. Echter, naar alle waarschijnlijkheid zal een klant goed onderbouwde argumenten echt wel ter harte nemen en je bedanken voor je inzicht. (Zo niet, dan is het waarschijnlijk het soort klant wat je ook niet als klant wilt hebben, c.q. waar je zo snel mogelijk vanaf wilt komen.)

[MsG]

Je kan ook overdrijven in dit geval. De methode zal als methode vast niet werken, maar spammers gaan echt niet voor een custom methodetje van een of ander zangeresje hun dingen bijwerken. Denk dat het best wel gaat werken daarom.

[BtM909]

MsG schreef op maandag 11 juli 2011 @ 00:51:
Je kan ook overdrijven in dit geval. De methode zal als methode vast niet werken, maar spammers gaan echt niet voor een custom methodetje van een of ander zangeresje hun dingen bijwerken. Denk dat het best wel gaat werken daarom.

Punt is dat het niet custom is, maar een JQuery plugin die veel wordt gebruikt: http://plugins.jquery.com/project/QapTcha

---

MrVegeta, weet niet of jij 't design hebt gemaakt? Klein tipje, je background in sommige panels (http://no-illusions.nl/za.../background_content_2.png), zorgt voor een psychedelic effect, waardoor alle teksten schuin lijken te lopen

[Bosmonster]

Als je jQuery 1.6 gebruikt: lees dan ook even over het verschil tussen attr() en prop() overigens. Al zijn form-boolean-attributen nog wel met attr() aan te passen, prop() is sinds 1.6 aangeraden.

(http://blog.jquery.com/20...uery-1-6-1-rc-1-released/)

[ Voor 48% gewijzigd door Bosmonster op 11-07-2011 07:40 ]

[R4gnax]

BtM909 schreef op maandag 11 juli 2011 @ 01:05:
[...]

Punt is dat het niet custom is, maar een JQuery plugin die veel wordt gebruikt: http://plugins.jquery.com/project/QapTcha

En dan ook nog eens een plugin met een héél herkenbaar patroon (een verborgen veld genaamd iQapTcha in het formulier), die op de koop toe als 'een hele goede beveiliging' wordt aangeprezen omdat 'bots niet met drag en drop kunnen werken'.

Vandaar dus ook mijn eerdere opmerking:

R4gnax schreef op zondag 10 juli 2011 @ 19:13:
Kortom, degene die dit systeem verzonnen heeft, heeft absoluut 0.0% kennis van zaken.