Bonjour, J'ai actuellement un problème avec le script qui est sensé contrôler et valider les informations contenues dans un formulaire.
Par exemple, partons du principe que le formulaire a pour but d'envoyer des réservations d'hôtels. Il doit contrôler que la date mentionnée
est valide de type dd/mm/yyyy et indique le jour même ou date ultérieure. Messages en cas d'erreur. Le reste je l'ai développé sans peine mais la j'avoue être un peu noub dans ce domaine de JS et je mélange un peu tout. Voici le code source de mon JS qui doit tester.
La variable du formulaire est checkin.
Merci de votre aide la je commence à m'énerver et c'est pour une virgule je pense.....
DOMHelper = {DGE:function(x){
return document.getElementById(x)
}
}
dh = DOMHelper;
dh.b = dh.DGE;
Date.prototype.isNorthAmerica = function(){
return (this.getTimezoneOffset() < 660 && this.getTimezoneOffset() > 180);
}
Date.prototype.octopusDisplayFormat = function(){
var mm = this.getMonth()+1;
if(mm < 10) mm = "0" + mm;
var dd = this.getDate();
if(dd < 10) dd = "0" + dd;
if(this.isNorthAmerica()){
return mm + "/" + dd + "/" + this.getFullYear();
}
else{
return dd + "/" + mm + "/" + this.getFullYear();
}
}
today = new Date();
dFormat = today.isNorthAmerica()?"mm/dd/yyyy":"dd/mm/yyyy";
function makeEuroDate(str){
var vals = str.split("/");
var nDateString = vals[1] + "/" + vals[0] + "/" + vals[2];
return new Date(nDateString);
}
function formatDateForURL(d){
var month = d.getMonth() + 1;
if(month < 10) month = "0" + month;
var date = d.getDate();
if(date < 10) date = "0" + date;
return d.getFullYear() + "-" + month + "-" + date;
}
function getSelectedValue(id){
try{
var theSelect = DGE(id);
return theSelect.options[theSelect.options.selectedIndex].value;
}
catch(Error){
return null;
}
}
expDate = /^\d{1,2}\/\d{1,2}\/\d{2,4}$/
function DGE(x){return document.getElementById(x)}
function validateDate(dateStr){
if(!expDate.test(dateStr)) {return false;}
var monthNumStr = today.isNorthAmerica() ? dateStr.split("/")[0]:dateStr.split("/")[1];
var dateNumStr = today.isNorthAmerica()?dateStr.split("/")[1]:dateStr.split("/")[0];
var yearNum = parseFloat(dateStr.split("/")[2]);
var monthNum = parseFloat(monthNumStr);
var dateNum = parseFloat(dateNumStr);
var maxDate = 31;
if(monthNum == 4 || monthNum == 5 || monthNum == 6 || monthNum == 9 || monthNum == 11){
maxDate = 30;
}
else if (monthNum == 2){
if(yearNum %4 ==0) {maxDate = 29;}
else{
maxDate = 28;
}
}
var bValid= (dateNum <= maxDate && dateNum > 0 && monthNum <= 12 && monthNum > 0);
return bValid;
}
function setCheckout(){
var numNights = parseInt(DGE("nights").value);
if(!isNaN(numNights)){
var checkinDateVal = DGE("checkin").value;
if(!expDate.test(checkinDateVal)){
// alert("Fuck");
}
else if(!validateDate(checkinDateVal)){
// alert("Bitte geben Sie ein gültiges Anreisedatum ein");
}
else{
var tDate = today.isNorthAmerica()?new Date(checkinDateVal):makeEuroDate(checkinDateVal);
tDate.setDate(tDate.getDate() + numNights);
DGE("checkout").innerHTML = tDate.octopusDisplayFormat();
}
}
else{
alert("Bitte geben Sie eine gültige Anzahl Nächte ein");
}
}
function unselectRadios(){
var theRadio = null;
var radios = document.getElementsByName("destinationRadio");
for(var i=0;i<radios.length;i++){
if(radios[i].checked==true) {
theRadio = radios[i];
}
}
if(theRadio != null) theRadio.checked=false;
}
function resetDestination(){
var d = dh.b("destination");
d.options.selectedIndex=0;
}
function makeURL(){
//var tracker = document.getElementById("td_rdir").value;
var destinationVal = getSelectedValue("destination");
var dradios = document.getElementsByName("destinationRadio");
var dradioVal = "";
for(var i=0;i<dradios.length;i++){
if(dradios[i].checked == true){
destinationVal= dradios[i].value;
}
}
var checkinVal = DGE("checkin").value;
var nightsVal = DGE("nights").value;
var roomtypeVal = document.getElementById("roomtype").value;
var roomsVal = document.getElementById("rooms").value;
var starratingVal = document.getElementById("starrating").value;
var bErrors = false;
var errorMsg = "";
var linebreak = "\n";
var checkPace = new Date();
var time = checkPace.getTime();
var inputDate = document.getElementById("checkin").value;
// COMPARE DATES
function ParseDate( str1 )
{
// Parse the string in DD/MM/YYYY format
re = /(\d{1,2})\/(\d{1,2})\/(\d{4})/
var arr = re.exec( str1 );
return new Date( parseInt(arr[3]), parseInt(arr[2], 10) - 1, parseInt(arr[1], 10) );
}
var userdate = ParseDate(document.getElementById("checkin").value);
var userTime = userdate.getTime();
//checker si date entrée est périmée
if(time >= userTime){
errorMsg += "Bitte geben Sie ein gültiges Anreisedatum ein" ;
bErrors = true;
}
if(destinationVal == 0){
errorMsg = "Bitte wählen Sie eine Stadt aus " + linebreak;
bErrors = true;
}
if(!expDate.test(checkinVal) ){
errorMsg += "Das eingegebene Anreisedatum muss in folgendem Format eingegeben werden: " + dFormat + linebreak;
bErrors = true;
}
if(isNaN(parseInt(nightsVal)))
{
errorMsg += "Bitte wählen Sie die Anzahl Nächte" + linebreak;
bErrors = true;
}
if(bErrors){
alert(errorMsg);
return;
}
var destinationArg = "&destination=" + destinationVal;
var checkinArg = "";
if(!expDate.test(checkinVal)){
alert("Das eingegebene Anreisedatum muss in folgendem Format eingegeben werden: " + dFormat);
}
else if(!validateDate(checkinVal)){
alert("Bitte geben Sie ein gültiges Anreisedatum ein");
}
else{
var tDate = today.isNorthAmerica()?new Date(checkinVal):makeEuroDate(checkinVal);
checkinArg = "&checkin=" + formatDateForURL(tDate);
}
var nightsArg= nightsVal == ""?"":"&nights=" + nightsVal;
var roomtypeArg = roomtypeVal == 0?"":"&roomtype=" + roomtypeVal;
var roomsArg = roomsVal == 0?"":"&rooms=" + roomsVal;
var starratingArg = starratingVal == 0?"":"&starrating=" + starratingVal;
var URLRoot = "www.artik.ch";
var URL = URLRoot + destinationArg + checkinArg + nightsArg + roomtypeArg + roomsArg + starratingArg;
// var URL = URLRoot + destinationArg + checkinArg + nightsArg + roomtypeArg + roomsArg;
// top.location.href = URL;
window.open(URL, '', '');
}
function init(){
//var co = DGE("checkout");
var ci = DGE("checkin");
var ciDate = new Date(today);
ciDate.setDate(ciDate.getDate() + 1)
ci.value = ciDate.octopusDisplayFormat();
ciDate.setDate(ciDate.getDate() + 1);
//co.innerHTML = ciDate.octopusDisplayFormat();
}
function showHideCalendarhot(e, dateField, formName)
{
var element = e.srcElement? e.srcElement : e.target;
var leftPos = findPosX(element);
var topPos = findPosY(element) + element.offsetHeight;
if (document.getElementById("hotcalendar").style.visibility=="visible")
{
document.getElementById("hotcalendar").style.visibility="hidden";
}
else if (document.getElementById("hotcalendar").style.visibility=="hidden")
{
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
writeCalendarhot(currMonth, currYear, dateField, formName);
document.getElementById("hotcalendar").style.visibility="visible";
document.getElementById("hotcalendar").style.left = leftPos + 50;
document.getElementById("hotcalendar").style.top = topPos - 105;
}
}
function writeCalendarhot(month, year, dateField, formName)
{
var monDate = new Date(year, month, 1);
var firstDay = monDate.getDay();
var monthDays = daysInMonth(month+1, year);
var currDate = new Date();
var currMonth = currDate.getMonth();
var currDay = currDate.getDate();
var currYear = currDate.getFullYear();
var dayNames = new Array;
dayNames.push("Sonday");
dayNames.push("Monday");
dayNames.push("Dieday");
dayNames.push("Mitday");
dayNames.push("Donday");
dayNames.push("Friday");
dayNames.push("Samday");
var monthNames = new Array;
monthNames.push("Januar");
monthNames.push("Februar");
monthNames.push("März");
monthNames.push("April");
monthNames.push("Mai");
monthNames.push("Juny");
monthNames.push("July");
monthNames.push("August");
monthNames.push("September");
monthNames.push("Oktober");
monthNames.push("November");
monthNames.push("Dezember");
var htmlCode = "";
var day = 1;
var nextMonth;
var prevMonth;
var nextYear = year;
var prevYear = year;
// Calculate next month and year
if (month == 11) {
nextMonth = 00;
++nextYear;
} else { nextMonth = month+1; }
// Calculate previous month and year
if (month == 00) {
prevMonth = 11;
--prevYear;
} else { prevMonth = month-1; }
// Start the table
htmlCode = "<table border='0' cellspacing='0'>";
htmlCode += "<tr><th colspan='7'><a href='javascript:writeCalendarhot("+prevMonth+","+prevYear+", \""+dateField+"\", \""+formName+"\")' title='Show previous month'><<<\/a> "+monthNames[month]+" "+year+" <a href='javascript:writeCalendarhot("+nextMonth+","+nextYear+", \""+dateField+"\", \""+formName+"\")' title='Show next month'>>><\/a><\/th><\/tr><tr>";
// Write the day names
for (var i = 0; i < dayNames.length; i++)
{
htmlCode += "<th>"+dayNames[i].substring(0, 3)+"<\/th>";
}
htmlCode += "<\/tr><tr>";
// Fill in empty values till the start of the month
for (i = 0; i < firstDay; i++)
{
htmlCode += "<td> <\/td>";
}
// Fill in the rest of the week
for (i = firstDay; i < 7; i++)
{
if (year < currYear || (year == currYear && month < currMonth) || (year == currYear && month == currMonth && day < currDay))
{
htmlCode += "<td class='cross'>"+day+"<\/td>";
}
else
{
htmlCode += "<td><a href='javascript:setDateshot("+day+", "+month+", "+year+",\""+dateField+"\", \""+formName+"\")'>"+day+"<\/a><\/td>";
}
day++;
}
htmlCode += "<\/tr><tr>";
// And then fill in the rest of the month
while (day <= monthDays)
{
for (i = 0; i < 7; i++)
{
if (day <= monthDays)
{
if (year < currYear || (year == currYear && month < currMonth) || (year == currYear && month == currMonth && day < currDay))
{
htmlCode += "<td class='cross'>"+day+"<\/td>";
}
else
{
htmlCode += "<td><a href='javascript:setDateshot("+day+", "+month+", "+year+", \""+dateField+"\", \""+formName+"\")' title='"+day+" "+monthNames[month]+" "+year+"'>"+day+"<\/a><\/td>";
}
}
else
{
htmlCode += "<td> <\/td>";
}
day++;
}
htmlCode += "<\/tr><tr>";
}
htmlCode += "<\/tr><tr><td colspan='7' id='foot'><a href='javascript:;' onclick='showHideCalendarhot(event)' title='Fermer'>Schliessen<\/a><\/td><\/tr><\/table>";
document.getElementById("hotcalendar").innerHTML = htmlCode;
}
function setDateshot(dateValue, monthValue, yearValue, dateField, formName)
{
today = new Date();
var chkIndate = today.isNorthAmerica()?padNumber(monthValue+1)+"/"+dateValue+"/"+yearValue:dateValue+"/"+padNumber(monthValue+1)+"/"+yearValue;
eval("document."+formName+"."+dateField+".value = chkIndate");
// setCheckout();
document.getElementById("hotcalendar").style.visibility="hidden";
}
function padNumber(number)
{
if (number < 10) {
return "0"+number;
} else { return number; }
}
function daysInMonth(month, year)
{
if (year == null) {
var d = new Date();
year = d.getFullYear();
}
if (month == 4 || month == 6 || month == 9 || month == 11) {
return 30;
} else if (month == 2) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
} else {
return 31;
}
}
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
<!-- GLB - eblws08 -->
LA page Html liée ( à placer dans le même dossier)