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-die-rueckkehr-des-dunkelelf-2-kampf-der-kreaturen" title="Die Rückkehr des Dunkelelf 2 - Kampf der Kreaturen"> <img class="lz" data-src="/covers/03/69/20/cover.jpg" alt="Die Rückkehr des Dunkelelf 2 - Kampf der Kreaturen" /> </a> <div class="itm-info"> <a href="/kostenlose-die-rueckkehr-des-dunkelelf-2-kampf-der-kreaturen" title="Die Rückkehr des Dunkelelf 2 - Kampf der Kreaturen"> Die Rückkehr des Dunkelelf 2 - Kampf der Kreaturen Online Lesen </a> von <a href="/autor-r-a-salvatore-online-lesen-downloaden-kostenlos" title="R. A. Salvatore">R. A. Salvatore</a> <div class="rkl-b"> <a href="/kostenlose-die-rueckkehr-des-dunkelelf-2-kampf-der-kreaturen" title="Die Rückkehr des Dunkelelf 2 - Kampf der Kreaturen"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-b00b5b7e02-ebok" title="B00B5B7E02 EBOK"> <img class="lz" data-src="/covers/01/79/13/cover.jpg" alt="B00B5B7E02 EBOK" /> </a> <div class="itm-info"> <a href="/kostenlose-b00b5b7e02-ebok" title="B00B5B7E02 EBOK"> B00B5B7E02 EBOK Online Lesen </a> von <a href="/autor-cain-susan-online-lesen-downloaden-kostenlos" title="Susan Cain">Susan Cain</a> <div class="rkl-b"> <a href="/kostenlose-b00b5b7e02-ebok" title="B00B5B7E02 EBOK"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-chaos-vor-der-kamera" title="Chaos vor der Kamera"> <img class="lz" data-src="/covers/03/08/95/cover.jpg" alt="Chaos vor der Kamera" /> </a> <div class="itm-info"> <a href="/kostenlose-chaos-vor-der-kamera" title="Chaos vor der Kamera"> Chaos vor der Kamera Online Lesen </a> von <a href="/autor-ulf-blanck-online-lesen-downloaden-kostenlos" title="Ulf Blanck">Ulf Blanck</a> <div class="rkl-b"> <a href="/kostenlose-chaos-vor-der-kamera" title="Chaos vor der Kamera"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-angst-kilborn-j-angst-afraid" title="Angst - Kilborn, J: Angst - Afraid"> <img class="lz" data-src="/i/de/debookcover.png" alt="Angst - Kilborn, J: Angst - Afraid" /> </a> <div class="itm-info"> <a href="/kostenlose-angst-kilborn-j-angst-afraid" title="Angst - Kilborn, J: Angst - Afraid"> Angst - Kilborn, J: Angst - Afraid Online Lesen </a> von <a href="/autor-kilborn-jack-online-lesen-downloaden-kostenlos" title="Jack Kilborn">Jack Kilborn</a> <div class="rkl-b"> <a href="/kostenlose-angst-kilborn-j-angst-afraid" title="Angst - Kilborn, J: Angst - Afraid"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-tod-einer-jungen-frau" title="Tod einer jungen Frau"> <img class="lz" data-src="/covers/02/38/68/cover.jpg" alt="Tod einer jungen Frau" /> </a> <div class="itm-info"> <a href="/kostenlose-tod-einer-jungen-frau" title="Tod einer jungen Frau"> Tod einer jungen Frau Online Lesen </a> von <a href="/autor-brown-carter-online-lesen-downloaden-kostenlos" title="Carter Brown">Carter Brown</a> <div class="rkl-b"> <a href="/kostenlose-tod-einer-jungen-frau" title="Tod einer jungen Frau"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-die-drei-und-der-super-papapgei" title="Die drei ??? und der Super-Papapgei"> <img class="lz" data-src="/covers/03/18/02/cover.jpg" alt="Die drei ??? und der Super-Papapgei" /> </a> <div class="itm-info"> <a href="/kostenlose-die-drei-und-der-super-papapgei" title="Die drei ??? und der Super-Papapgei"> Die drei ??? und der Super-Papapgei Online Lesen </a> von <a href="/autor-robert-arthur-online-lesen-downloaden-kostenlos" title="Robert Arthur">Robert Arthur</a> <div class="rkl-b"> <a href="/kostenlose-die-drei-und-der-super-papapgei" title="Die drei ??? und der Super-Papapgei"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-soehne-der-erde-19-der-toedliche-ring" title="Söhne der Erde 19 - Der Tödliche Ring"> <img class="lz" data-src="/covers/03/97/43/cover.jpg" alt="Söhne der Erde 19 - Der Tödliche Ring" /> </a> <div class="itm-info"> <a href="/kostenlose-soehne-der-erde-19-der-toedliche-ring" title="Söhne der Erde 19 - Der Tödliche Ring"> Söhne der Erde 19 - Der Tödliche Ring Online Lesen </a> von <a href="/autor-susanne-u-wiemer-online-lesen-downloaden-kostenlos" title="Susanne U. Wiemer">Susanne U. Wiemer</a> <div class="rkl-b"> <a href="/kostenlose-soehne-der-erde-19-der-toedliche-ring" title="Söhne der Erde 19 - Der Tödliche Ring"> <img src="/i/de/rlesen.png" /> </a> </div> </div> </div> <div class="itm itma"> <a href="/kostenlose-david-and-goliath-underdogs-misfits-and-the-art-of-battling-giants" title="David and Goliath: Underdogs, Misfits, and the Art of Battling Giants"> <img class="lz" data-src="/covers/02/95/48/cover.jpg" alt="David and Goliath: Underdogs, Misfits, and the Art of Battling Giants" /> </a> <div class="itm-info"> <a href="/kostenlose-david-and-goliath-underdogs-misfits-and-the-art-of-battling-giants" title="David and Goliath: Underdogs, Misfits, and the Art of Battling Giants"> David and Goliath: Underdogs, Misfits, and the Art of Battling Giants Online Lesen </a> von <a href="/autor-malcolm-gladwell-online-lesen-downloaden-kostenlos" title="Malcolm Gladwell">Malcolm Gladwell</a> <div class="rkl-b"> <a href="/kostenlose-david-and-goliath-underdogs-misfits-and-the-art-of-battling-giants" title="David and Goliath: Underdogs, Misfits, and the Art of Battling Giants"> <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>