JQuery Kochbuch (German Edition)

MEHRFACHAUSWAHL -->














    Lösung
    Der erste Teil der Lösung ist recht einfach. Das

-Element wird selektiert und das Event
submit
übernommen. Wenn die Form abgeschickt werden soll, werden die notwendigen Form-Elemente durchlaufen und es wird geprüft, ob sie korrekt ausgefüllt sind. Gibt es keine Fehler, dann wird das Event
submit
ausgelöst:
$('form').submit(function(event){

    var isErrorFree = true;

    // alle notwendigen Form-Elemente durchlaufen und überprüfen
    $('input.required, select.required, textarea.required',this).each(function(){
     if ( validateElement.isValid(this) == false ){
     isErrorFree = false;
     };
    });

    // Alternative per Ajax:
    // event.preventDefault();
    // if (isErrorFree){ $.get( url, data, callback, type ) }
    // if (isErrorFree){ $.post( url, data, callback, type ) }
    // if (isErrorFree){ $.ajax( options ) }

    return isErrorFree;

}); // Ende von .submit()
    Im zweiten Teil dieser Lösung wird die eigentliche Überprüfung vorgenommen. Die Methode
isValid()
speichert zunächt häufiger genutzte Daten des zu überprüfenden Elements zwischen. Dann wird es in der
switch()
-Anweisung geprüft. Zum Schluss werden die Klassennamen dem

und den
div.errorMessage
-Elementen hinzugefügt oder wieder entfernt.
var validateElement = {

    isValid:function(element){

     var isValid = true;
     var $element = $(element);
     var id = $element.attr('id');
     var name = $element.attr('name');
     var value = $element.val();

     // nutzt Typattribute aus dem Tag
     // besitzt den Typ 'textarea'<br />     // <select> besitzt den Typ 'select-one' oder 'select-multiple'<br />     var type = $element[0].type.toLowerCase();<br /><br />     switch(type){<br />     case 'text':<br />     case 'textarea':<br />     case 'password':<br />     if ( value.length == 0 || <br />value.replace(/\s/g,'').length == 0 ){ isValid = false; }<br />     break;<br />     case 'select-one':<br />     case 'select-multiple':<br />     if( !value ){ isValid = false; }<br />     break;<br />     case 'checkbox':<br />     case 'radio':<br />     if( $('input[name="' + name + <br />'"]:checked').length == 0 ){ isValid = false; };<br />     break;<br />     } // Ende von switch()<br /><br />     // anstatt $(selector).method nutzen wir $(selector)[method]<br />     // Wahl der Methode<br />     var method = isValid ? 'removeClass' : 'addClass';<br /><br />     // Fehlermeldung anzeigen [addClass]<br />     // Fehlermeldung verbergen [removeClass]<br />     $('#errorMessage_' + name)[method]('showErrorMessage');<br />     $('label[for="' + id + '"]')[method]('error');<br /><br />     return isValid;<br /><br />    } // Ende von validateElement.isValid()<br />}; // Ende des Objekts validateElement<br />    Diskussion<br />    Die Überprüfungen sind in dieser Lösung ziemlich einfach. Folgendes wird kontrolliert:<br />    Die Elemente<br /><input type="text"><br />,<br /><input type="password"><br />und<br /><textarea><br />enthalten Daten, die nicht nur aus Whitespace bestehen.<br />Bei<br /><select><br />-Elementenist eine andere als die Standard-Option ausgewählt. Beachten Sie, dass es zwei Arten von<br /><select><br />-Elementen gibt: »select-one« und »select-multiple« (siehe den zweiten Code-Ausschnitt im Abschnitt für den HTML-Code und den vorherigen Code-Ausschnitt für die JavaScript-Überprüfung). Das erste<br /><option><br />-Element des »select-one«-<br /><select><br />muss das Attribut<br />value=""<br />besitzen, damit die Überprüfung funktioniert. Das </div> <div> <ul class="pgn" role="navigation"> <li> <a href="/kostenlose-jquery-kochbuch-german-edition/lesen/96" rel="prev" aria-label="« Vorherige">«</a> </li> <li><a href="/kostenlose-jquery-kochbuch-german-edition">1</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/2">2</a></li> <li class="dis" aria-disabled="true"><span>...</span></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/94">94</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/95">95</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/96">96</a></li> <li class="act" aria-current="page"><span>97</span></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/98">98</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/99">99</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/100">100</a></li> <li class="dis" aria-disabled="true"><span>...</span></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/183">183</a></li> <li><a href="/kostenlose-jquery-kochbuch-german-edition/lesen/184">184</a></li> <li> <a href="/kostenlose-jquery-kochbuch-german-edition/lesen/98" rel="next" aria-label="Nächster »">»</a> </li> </ul> </div> <div class="otr"> <h2>Weitere Kostenlose Bücher</h2> <div class="itm itma"> <a href="/kostenlose-falaysia-fremde-welt-band-iii-piladoma-german-edition" title="Falaysia - Fremde Welt - Band III: Piladoma (German Edition)"> <img class="lz" data-src="/covers/04/44/97/cover.jpg" alt="Falaysia - Fremde Welt - Band III: Piladoma (German Edition)" /> </a> <div class="itm-info"> <a href="/kostenlose-falaysia-fremde-welt-band-iii-piladoma-german-edition" title="Falaysia - Fremde Welt - Band III: Piladoma (German Edition)"> Falaysia - Fremde Welt - Band III: Piladoma (German Edition) Online Lesen </a> von <a href="/autor-linger-ina-online-lesen-downloaden-kostenlos" title="Ina Linger">Ina Linger</a> <div class="rkl-b"> <a href="/kostenlose-falaysia-fremde-welt-band-iii-piladoma-german-edition" title="Falaysia - Fremde Welt - Band III: Piladoma (German Edition)"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-das-schattenbuch" title="Das Schattenbuch"> <img class="lz" data-src="/covers/03/21/05/cover.jpg" alt="Das Schattenbuch" /> </a> <div class="itm-info"> <a href="/kostenlose-das-schattenbuch" title="Das Schattenbuch"> Das Schattenbuch Online Lesen </a> von <a href="/autor-siefener-michael-online-lesen-downloaden-kostenlos" title="Michael Siefener">Michael Siefener</a> <div class="rkl-b"> <a href="/kostenlose-das-schattenbuch" title="Das Schattenbuch"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-die-schriften-von-accra-german-edition" title="Die Schriften von Accra (German Edition)"> <img class="lz" data-src="/covers/05/00/13/cover.jpg" alt="Die Schriften von Accra (German Edition)" /> </a> <div class="itm-info"> <a href="/kostenlose-die-schriften-von-accra-german-edition" title="Die Schriften von Accra (German Edition)"> Die Schriften von Accra (German Edition) Online Lesen </a> von <a href="/autor-coelho-paulo-online-lesen-downloaden-kostenlos" title="Paulo Coelho">Paulo Coelho</a> <div class="rkl-b"> <a href="/kostenlose-die-schriften-von-accra-german-edition" title="Die Schriften von Accra (German Edition)"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-0680-der-verratene-traum" title="0680 - Der verratene Traum"> <img class="lz" data-src="/covers/01/87/59/cover.jpg" alt="0680 - Der verratene Traum" /> </a> <div class="itm-info"> <a href="/kostenlose-0680-der-verratene-traum" title="0680 - Der verratene Traum"> 0680 - Der verratene Traum Online Lesen </a> von <a href="/autor-claudia-kern-online-lesen-downloaden-kostenlos" title="Claudia Kern">Claudia Kern</a> <div class="rkl-b"> <a href="/kostenlose-0680-der-verratene-traum" title="0680 - Der verratene Traum"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-first-frost" title="First Frost"> <img class="lz" data-src="/covers/01/47/19/cover.png" alt="First Frost" /> </a> <div class="itm-info"> <a href="/kostenlose-first-frost" title="First Frost"> First Frost Online Lesen </a> von <a href="/autor-estep-jennifer-online-lesen-downloaden-kostenlos" title="Jennifer Estep">Jennifer Estep</a> <div class="rkl-b"> <a href="/kostenlose-first-frost" title="First Frost"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-die-meuterer-der-bounty" title="Die Meuterer der ›Bounty‹"> <img class="lz" data-src="/covers/01/74/68/cover.jpg" alt="Die Meuterer der ›Bounty‹" /> </a> <div class="itm-info"> <a href="/kostenlose-die-meuterer-der-bounty" title="Die Meuterer der ›Bounty‹"> Die Meuterer der ›Bounty‹ Online Lesen </a> von <a href="/autor-jules-verne-online-lesen-downloaden-kostenlos" title="Jules Verne">Jules Verne</a> <div class="rkl-b"> <a href="/kostenlose-die-meuterer-der-bounty" title="Die Meuterer der ›Bounty‹"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-bilder-aus-dem-berliner-leben" title="Bilder Aus Dem Berliner Leben"> <img class="lz" data-src="/i/de/debookcover.png" alt="Bilder Aus Dem Berliner Leben" /> </a> <div class="itm-info"> <a href="/kostenlose-bilder-aus-dem-berliner-leben" title="Bilder Aus Dem Berliner Leben"> Bilder Aus Dem Berliner Leben Online Lesen </a> von <a href="/autor-julius-rodenberg-online-lesen-downloaden-kostenlos" title="Julius Rodenberg">Julius Rodenberg</a> <div class="rkl-b"> <a href="/kostenlose-bilder-aus-dem-berliner-leben" title="Bilder Aus Dem Berliner Leben"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-schnueffler-auf-burg-schreckenstein-1" title="Schnüffler auf Burg Schreckenstein"> <img class="lz" data-src="/covers/02/96/70/cover.jpg" alt="Schnüffler auf Burg Schreckenstein" /> </a> <div class="itm-info"> <a href="/kostenlose-schnueffler-auf-burg-schreckenstein-1" title="Schnüffler auf Burg Schreckenstein"> Schnüffler auf Burg Schreckenstein Online Lesen </a> von <a href="/autor-hassencamp-oliver-online-lesen-downloaden-kostenlos" title="Oliver Hassencamp">Oliver Hassencamp</a> <div class="rkl-b"> <a href="/kostenlose-schnueffler-auf-burg-schreckenstein-1" title="Schnüffler auf Burg Schreckenstein"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> </div> </div> <footer> <div class="inn"> <div class="lf"> © Kostenlos Online Lesen 2024 support@kostenlosonlinelesen.net </div> <div class="rg"> <!-- Begin Web-Stat code v 6.3 --> <span id="wts1866490"> </span><script> var wts=document.createElement('script');wts.type='text/javascript'; wts.async=true;wts.src='https://wts.one/3/1866490/log6_2.js'; document.getElementById('wts1866490').appendChild(wts); </script><noscript><a href="https://www.web-stat.com"> <img src="https://wts.one/6/3/1866490.gif" alt="Web-Stat traffic analytics"></a></noscript> <!-- End Web-Stat code v 6.3 --> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53412301, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53412301" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div> </div> </footer> <script src="/js/de/detail.js?1570711139"></script> </body> </html>