Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Validierung eines Inputfeldes mit jQuery

    Guni3

    • Neu im Forum
    • Beiträge: 2
    Validierung eines Inputfeldes mit jQuery
    am: 06. Juni 2014, 12:44:13
    Moin Moin!

    Ich komme eigentlich aus demm Magento-Umfeld und wollte mich mal ein wenig nach rechts und links umschauen. Zu diesem Zweck habe ich angefangen mich mit modified auseinander zu setzten.
    Bislang habe ich mir lokal einen Shop aufgesetzt, als Template modern2012 gewählt, auch ein paar neue Artikel-Attribute eingebaut und noch ein paar andere Sachen damit fabriziert. Soweit so gut.
    Nun wollte ich mir auf der Produktseite ein Inputfeld einbauen, in dem der Kunde seinen Wunschliefertermin eingeben muss. Vorher soll der Warenkorb-Button deaktiviert sein. Das Inputfeld war schnell geschaffen, dem "In den Warenkorb"-Button eine Id gegeben , jQuery-Datepicker dazu und dann noch die Validierung. Letzter macht mir allerdings Probleme und ich sehe im Augenblick auch keinen Lösungsansatz.

    Hier das js-Script:
    Code: Javascript  [Auswählen]
    $().ready(function () {
        $('#addCartButton').attr('disabled', 'disabled');
        //sanity check
        $.validator.addMethod(
            "dateDE",
            function (value, element) {
                var check = false;
                var re = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
                if (re.test(value)) {
                    var adata = value.split('.');
                    var dd = parseInt(adata[0], 10);
                    var mm = parseInt(adata[1], 10);
                    var yyyy = parseInt(adata[2], 10);
                    var xdata = new Date(yyyy, mm - 1, dd);
                    if (( xdata.getFullYear() == yyyy ) && ( xdata.getMonth() == mm - 1 ) && ( xdata.getDate() == dd )) check = true;
                } else
                    check = false;
                return this.optional(element) || check;
            },
            ''
        );
        //date in future?
        $.validator.addMethod(
            "dateFuture",
            function (value, element) {
                var check = false;
                var de = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
                if (de.test(value)) {
                    var adata = value.split('.');
                    var d = parseInt(adata[0], 10);
                    var m = parseInt(adata[1], 10);
                    var y = parseInt(adata[2], 10);
                    var date = new Date();
                    var _now = new Date();
                    date.setFullYear(y, m, d);
                    if (date.getTime() > _now.getTime()) check = true;
                }
                else
                    check = false;
                return this.optional(element) || check;
            },
            ''
        );
        //validate Form
        $('#cart_quantity').validate({
            rules: {
                deliveryDate: {
                    required: true,
                    dateDE: true,
                    dateFuture: true
                }
            },
            messages: {
                deliveryDate: {
                    required: 'Dies ist ein Pflichtfeld.',
                    dateDE: 'Bitte geben Sie ein Datum im Format dd.mm.yyyy ein.',
                    dateFuture: 'Sie können sich nur etwas in der Zukunft liefern lassen.'
                }
            }
        });
        //start validate
        $('#deliveryDate').on('keyup blur', function () {
            $('.mandatory_field').css('display', 'none');
            if ($('#cart_quantity').valid()) {
                $('#addCartButton').prop('disabled', false);
            } else {
                $('#addCartButton').prop('disabled', 'disabled');
            }
        });
    });

    Wenn ich das extern teste (

    Code: XML  [Auswählen]
    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <script type="text/javascript" src="validator.js"></script>
    </head>
    <body>
    <form action="" id="cart_quantity">

        <input id="deliveryDate" name="deliveryDate" class="start" type="text">
        <span class="mandatory_field">Bitte Lieferdatum auswählen!!!</span>
        <br/>
        <input id="addCartButton" type="image" name="submit">

    </form>
    </body>
    </html>

    ), dann läuft es. Sobald der Code im Shop ist reicht es, wenn ich einmal in das Feld klicke und dann wieder herausgehe um den Button freizugeben. Ich hatte zuerst den Datepicker im Verdacht, aber der ist es auch nicht (wieder ausgebaut).
    Habt Ihr vielleicht eine Idee?

    Vielen Dank
    Andreas

    Linkback: https://www.modified-shop.org/forum/index.php?topic=30318.0

    Godzilla

    • Schreiberling
    • Beiträge: 489
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #1 am: 06. Juni 2014, 13:05:32
    Es müsste eigentlich ausreichen, wenn du dem Inputfeld ein required-Attribut und ein date-type verpasst. Die Validierung übernimmt dann der Browser und jQuery kann wieder raus.

    Code: PHP  [Auswählen]
    <form ...
    <input required name="deliveryDate" type="date">
    <input type="submit" name="submit">
    </form>
     

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #2 am: 06. Juni 2014, 13:24:42
    Hallo Guni3

    Nur so im Vorbeigehen folgende Idee (ohne den Code genauer angeschaut zu haben).

    Ersetze mal folgendes (
    Code: Javascript  [Auswählen]
    $().ready(function () {
    ) mit (
    Code: Javascript  [Auswählen]
    jQuery(document).ready(function($) {
    ) wegen (
    Zitat
    Wenn ich das extern teste dann läuft es.
    )

    Gruss
    Hanspeter

    Godzilla

    • Schreiberling
    • Beiträge: 489
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #3 am: 06. Juni 2014, 13:35:45
    Hallo hpzeller,

    von mir ist der Code, bei dem man auf JQuery komplett verzichten kann. Ich bin nicht der Fragesteller.

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #4 am: 06. Juni 2014, 13:39:05
    Hallo Godzilla

    Sorry  :-X

    Gruss
    Hanspeter

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #5 am: 06. Juni 2014, 15:10:00
    Hallo Guni3

    Im Vorbeigehen die zweite Idee bzw. eine Frage die auftaucht.
    Du verwendest beim externen Test “jquery-1.10.2.min.js” welche jQuery Version wird von deinem Test-Shop bzw. Template verwendet, will heissen besteht möglicherweise eine Inkompatibilität?

    Gruss
    Hanspeter

    Guni3

    • Neu im Forum
    • Beiträge: 2
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #6 am: 10. Juni 2014, 08:54:46
    Moin Moin!

    Vielen Dank für Eure Hilfe.
    Was mich noch an den Input-Feldern mit type="date" stört ist, dass die Browser die unterschiedlich implementiert haben. Um dem Nutzer eine Hilfe zu geben, muß ich in den meißten Browsern noch einen Datepicker dazu packen. Opera hat allerdings etwas vergleichbares schon drinne und der Datepicker funktioniert dort nicht, da Opera eine Eingabe im eigenen Kalender erwartet. Ergo müßte ich extra für den Browser den Datepicker abschalten und dann auch bei jedem Browserupdate entsprechend prüfen und gegebenenfalls handeln.
    Ich habe ausschließlich die 1.10.2.min verwendet. Mein Code an sich funktioniert aber auch mit der 1.9.1. und der 1.7.2.. Testen tue ich unter den aktuellen Versionen von IE, Firefox, Opera, Chrome. Auch die ausführliche Schreibweise hatte keine Änderung zur Folge.

    Andreas

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: Validierung eines Inputfeldes mit jQuery
    Antwort #7 am: 10. Juni 2014, 09:38:41
    Hallo Guni3

    Zitat
    Was mich noch an den Input-Feldern mit type="date" stört ist, dass die Browser die unterschiedlich implementiert haben. Um dem Nutzer eine Hilfe zu geben, muß ich in den meißten Browsern noch einen Datepicker dazu packen. Opera hat allerdings etwas vergleichbares schon drinne und der Datepicker funktioniert dort nicht, da Opera eine Eingabe im eigenen Kalender erwartet. Ergo müßte ich extra für den Browser den Datepicker abschalten und dann auch bei jedem Browserupdate entsprechend prüfen und gegebenenfalls handeln.

    Vielleicht helfen dir folgende Links weiter.
    http://dev.mikamai.com/post/75139920117/using-html5-date-fields-mantaining-backward
    http://modernizr.com/docs/

    Gruss
    Hanspeter
    10 Antworten
    6599 Aufrufe
    28. Januar 2015, 18:16:01 von thomas57
    3 Antworten
    3690 Aufrufe
    23. Juli 2012, 07:18:56 von macca
    16 Antworten
    6457 Aufrufe
    17. April 2010, 19:01:41 von Tomcraft
    3 Antworten
    3064 Aufrufe
    06. Januar 2011, 13:40:32 von DokuMan