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:
$().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 (
<!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