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-im-herzen-der-wildnis-roman" title="Im Herzen der Wildnis - Roman"> <img class="lz" data-src="/covers/57/13/cover.jpg" alt="Im Herzen der Wildnis - Roman" /> </a> <div class="itm-info"> <a href="/kostenlose-im-herzen-der-wildnis-roman" title="Im Herzen der Wildnis - Roman"> Im Herzen der Wildnis - Roman Online Lesen </a> von <a href="/autor-norah-sanders-online-lesen-downloaden-kostenlos" title="Norah Sanders">Norah Sanders</a> <div class="rkl-b"> <a href="/kostenlose-im-herzen-der-wildnis-roman" title="Im Herzen der Wildnis - Roman"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-will-trent-02-entsetzen" title="Will Trent 02 - Entsetzen"> <img class="lz" data-src="/covers/02/89/92/cover.jpg" alt="Will Trent 02 - Entsetzen" /> </a> <div class="itm-info"> <a href="/kostenlose-will-trent-02-entsetzen" title="Will Trent 02 - Entsetzen"> Will Trent 02 - Entsetzen Online Lesen </a> von <a href="/autor-slaughter-karin-online-lesen-downloaden-kostenlos" title="Karin Slaughter">Karin Slaughter</a> <div class="rkl-b"> <a href="/kostenlose-will-trent-02-entsetzen" title="Will Trent 02 - Entsetzen"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-wo-die-liebe-beginnt" title="Wo die Liebe beginnt"> <img class="lz" data-src="/covers/73/30/cover.jpg" alt="Wo die Liebe beginnt" /> </a> <div class="itm-info"> <a href="/kostenlose-wo-die-liebe-beginnt" title="Wo die Liebe beginnt"> Wo die Liebe beginnt Online Lesen </a> von <a href="/autor-emily-giffin-online-lesen-downloaden-kostenlos" title="Emily Giffin">Emily Giffin</a> <div class="rkl-b"> <a href="/kostenlose-wo-die-liebe-beginnt" title="Wo die Liebe beginnt"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-null-nichtig-daniel-juliet-eine-liebesgeschichte-teil-2-german-edition" title="Null & Nichtig (Daniel & Juliet - eine Liebesgeschichte (Teil 2)) (German Edition)"> <img class="lz" data-src="/covers/04/16/45/cover.jpg" alt="Null & Nichtig (Daniel & Juliet - eine Liebesgeschichte (Teil 2)) (German Edition)" /> </a> <div class="itm-info"> <a href="/kostenlose-null-nichtig-daniel-juliet-eine-liebesgeschichte-teil-2-german-edition" title="Null & Nichtig (Daniel & Juliet - eine Liebesgeschichte (Teil 2)) (German Edition)"> Null & Nichtig (Daniel & Juliet - eine Liebesgeschichte (Teil 2)) (German Edition) Online Lesen </a> von <a href="/autor-renee-r-picard-online-lesen-downloaden-kostenlos" title="Renee R. Picard">Renee R. Picard</a> <div class="rkl-b"> <a href="/kostenlose-null-nichtig-daniel-juliet-eine-liebesgeschichte-teil-2-german-edition" title="Null & Nichtig (Daniel & Juliet - eine Liebesgeschichte (Teil 2)) (German Edition)"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-zwei-krankenschwestern-auf-dem-jacobsweg-oder-im-oktober-gibt-es-keine-nachtpilger-german-edition" title="Zwei Krankenschwestern auf dem Jacobsweg oder im Oktober gibt es keine Nachtpilger (German Edition)"> <img class="lz" data-src="/covers/01/67/58/cover.jpg" alt="Zwei Krankenschwestern auf dem Jacobsweg oder im Oktober gibt es keine Nachtpilger (German Edition)" /> </a> <div class="itm-info"> <a href="/kostenlose-zwei-krankenschwestern-auf-dem-jacobsweg-oder-im-oktober-gibt-es-keine-nachtpilger-german-edition" title="Zwei Krankenschwestern auf dem Jacobsweg oder im Oktober gibt es keine Nachtpilger (German Edition)"> Zwei Krankenschwestern auf dem Jacobsweg oder im Oktober gibt es keine Nachtpilger (German Edition) Online Lesen </a> von <a href="/autor-braun-sandra-online-lesen-downloaden-kostenlos" title="Sandra Braun">Sandra Braun</a> <div class="rkl-b"> <a href="/kostenlose-zwei-krankenschwestern-auf-dem-jacobsweg-oder-im-oktober-gibt-es-keine-nachtpilger-german-edition" title="Zwei Krankenschwestern auf dem Jacobsweg oder im Oktober gibt es keine Nachtpilger (German Edition)"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-kinder-des-feuers" title="Kinder des Feuers"> <img class="lz" data-src="/covers/02/47/92/cover.jpg" alt="Kinder des Feuers" /> </a> <div class="itm-info"> <a href="/kostenlose-kinder-des-feuers" title="Kinder des Feuers"> Kinder des Feuers Online Lesen </a> von <a href="/autor-julia-kroehn-online-lesen-downloaden-kostenlos" title="Julia Kröhn">Julia Kröhn</a> <div class="rkl-b"> <a href="/kostenlose-kinder-des-feuers" title="Kinder des Feuers"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-love-at-stakes-06-die-mit-dem-vampir-tanzt-ok" title="Love at Stakes 06 - Die mit dem Vampir tanzt-ok"> <img class="lz" data-src="/covers/03/85/35/cover.jpg" alt="Love at Stakes 06 - Die mit dem Vampir tanzt-ok" /> </a> <div class="itm-info"> <a href="/kostenlose-love-at-stakes-06-die-mit-dem-vampir-tanzt-ok" title="Love at Stakes 06 - Die mit dem Vampir tanzt-ok"> Love at Stakes 06 - Die mit dem Vampir tanzt-ok Online Lesen </a> von <a href="/autor-kerrelyn-sparks-online-lesen-downloaden-kostenlos" title="Kerrelyn Sparks">Kerrelyn Sparks</a> <div class="rkl-b"> <a href="/kostenlose-love-at-stakes-06-die-mit-dem-vampir-tanzt-ok" title="Love at Stakes 06 - Die mit dem Vampir tanzt-ok"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-im-falle-einer-falle" title="Im Falle einer Falle"> <img class="lz" data-src="/covers/04/38/03/cover.jpg" alt="Im Falle einer Falle" /> </a> <div class="itm-info"> <a href="/kostenlose-im-falle-einer-falle" title="Im Falle einer Falle"> Im Falle einer Falle Online Lesen </a> von <a href="/autor-fair-a-a-online-lesen-downloaden-kostenlos" title="A. A. Fair">A. A. Fair</a> <div class="rkl-b"> <a href="/kostenlose-im-falle-einer-falle" title="Im Falle einer Falle"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> </div> </div> <footer> <div class="inn"> <div class="lf"> © Kostenlos Online Lesen 2025 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>