Validate van input zonder form submit

dinsdag 24 februari 2015 12:27

Acties:

0 Henk 'm!

markvt

Peppi Cola

Topicstarter

Ik ben een formulier aan het bouwen en loop tegen het volgende aan.

Voorbeeld van het input veld:

code:

1
2
3

<html><head><title></title></head><body><form>
<input type="number" min="1" max="10">
</form></body></html>

fiddle: http://jsfiddle.net/e0nhkzh7/

So far so good, echter ik weet de min/max waarde nog niet op het moment dat de input op het scherm geplaatst is. Dit kan ik pas later bepalen.

Nu zet ik de waarde van min en max via een jquery script:
http://jsfiddle.net/np0zjv4p/
Dan controleert hij de waarde wanneer je op submit klikt.

Nu heb ik echter geen submitknop maar een andere button die een javascript uitvoert dat wat checks uitvoert en dan het formulier submit.

De validatie op het veld wordt dan overgeslagen
http://jsfiddle.net/cnmkrz2u/1/

Dit probleem komt omdat we eigen checks hebben en een jquery plugin die validatie toepast bij de submit van het formulier. De eigen checks worden door het javascript uitgevoerd en de jquery plugin doet dit onsubmit.

Nu is het volgens mij de enige optie om hiervoor de onsubmit van het formulier zelf te gebruiken. Maar wellicht is er een andere optie die ik over het hoofd heb gezien?

van-tilburg.info -=- meka (sega emulator) - Proud MEDION fanclub member - KOPPIG VOLHOUDEN !

dinsdag 24 februari 2015 12:33

Acties:

0 Henk 'm!

azerty

En waarom kun je dat veld ook niet met je eigen javascript controleren?

dinsdag 24 februari 2015 12:45

Acties:

0 Henk 'm!

markvt

Peppi Cola

Topicstarter

Dan ben ik de jquery validatie plugin nogmaals aan het maken, die heeft wel functionaliteit om min/max te controleren echter kan die maar 1x aangemaakt worden en kan je later geen regels toevoegen die gecontroleerd moeten worden.

Mogelijk kan ik ook die validatie plugin vervangen door een andere waar je wel later extra validatie regels aan kunt toevoegen.

van-tilburg.info -=- meka (sega emulator) - Proud MEDION fanclub member - KOPPIG VOLHOUDEN !

dinsdag 24 februari 2015 13:09

Acties:

0 Henk 'm!

Geerrrt

Kijk hier eens (Geaccepteerd antwoord):

http://stackoverflow.com/...ing-html5-form-validation

[ Voor 11% gewijzigd door Geerrrt op 24-02-2015 13:10 ]

Eury#2434

dinsdag 24 februari 2015 13:46

Acties:

0 Henk 'm!

azerty

markvt schreef op dinsdag 24 februari 2015 @ 12:45:
Dan ben ik de jquery validatie plugin nogmaals aan het maken, die heeft wel functionaliteit om min/max te controleren echter kan die maar 1x aangemaakt worden en kan je later geen regels toevoegen die gecontroleerd moeten worden.

Volgens dit SO antwoord zou het wel mogelijk moeten zijn om de regels te wijzigen (snel opzoekwerk):

http://stackoverflow.com/...hanging-rules-dynamically

dinsdag 24 februari 2015 14:12

Acties:

0 Henk 'm!

markvt

Peppi Cola

Topicstarter

Als ik deze code toevoeg kan ik het toevoegen aan mijn eigen validatie:

JavaScript:

$('input').blur(function(event) {
        if (event.target.validity)
        {
            if (event.target.checkValidity())
            {
                $(event.target).removeClass("erroneous");
//              validForm=true;
            }
            else
            {
                $(event.target).addClass("erroneous");
//              validForm=false;
            }
        }
    });

Nu alleen nog iets knutselen dat ook met IE9 om wil gaan

van-tilburg.info -=- meka (sega emulator) - Proud MEDION fanclub member - KOPPIG VOLHOUDEN !

dinsdag 24 februari 2015 14:44

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Html

Waar hoort mijn topic? staat er niet voor niks.

PRG>>WEB

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 24 februari 2015 21:11

Acties:

0 Henk 'm!

R4gnax

Jquery
Javascript

markvt schreef op dinsdag 24 februari 2015 @ 12:45:
Dan ben ik de jquery validatie plugin nogmaals aan het maken, die heeft wel functionaliteit om min/max te controleren echter kan die maar 1x aangemaakt worden en kan je later geen regels toevoegen die gecontroleerd moeten worden.

Mogelijk kan ik ook die validatie plugin vervangen door een andere waar je wel later extra validatie regels aan kunt toevoegen.

Mede dankzij dit soort problemen ben ik zelf compleet van input validatie afgestapt. Tegenwoordig cross-bind ik input data aan een in-memory observable data model en daar zet ik validatie op.

Werkt een flink stuk prettiger, moet ik zeggen. De buy-in factor is natuurlijk wel een stuk hoger, maar de meeste websites binnen het segment waar mijn werkgever in zit hebben toch al dermate veel scripting nodig dat we al op een MV* oplossing zitten.

woensdag 25 februari 2015 11:36

Acties:

0 Henk 'm!

markvt

Peppi Cola

Topicstarter

Als je alleen de stijl wilt wijzigen als de waarde niet valid is kan er natuurlijk ook gebruikt worden van de :invalid op de input.

Cascading Stylesheet:

1	input:invalid{border:2px solid orange;}

van-tilburg.info -=- meka (sega emulator) - Proud MEDION fanclub member - KOPPIG VOLHOUDEN !

Onderwerpen