forum_amnesiac
04-22-2009, 04:33 PM
I have a form in which I validate that the date is input in a set format, that the date is not before today and that it is a Monday.
All of the validation works perfectly.
If the value fails to pass any one of these validation tests I want to give an alert and return to the date field for re-input, I use a small function for this.
The problem I have is that although the alert is given, the focus does not return to the correct field, it goes to the next field in the form sequence. I use "tabindex" to ensure that the fields are initially presented in the sequence I want.
Here is my JS
function fieldFocus3(msg) {
alert(msg);
document.jaugeage.startDate.select();
document.jaugeage.startDate.focus();
return false;
}
function mondaycheck(datechosen, fridaydate) {
var dtCh= "/";
var pos1=datechosen.indexOf(dtCh);
var pos2=datechosen.indexOf(dtCh,pos1+1);
if (pos1==-1 || pos2==-1){
fieldFocus3("Veuillez écrire la date de début comme ceci jj/mm/aaaa");
jaugeage.startDate.value = "jj/mm/aaaa";
}
if (pos1!=-1 && pos2!=-1){
var parts = datechosen.split('/');
var passdate = new Date(parseFloat(parts[2]),(parseFloat(parts[1])-1),parseFloat(parts[0]),23,59,59,999);
var thisDay=passdate.getDay();
Testtoday = new Date();
if(passdate < Testtoday) {
fieldFocus3("La date ne peut pas être plus tôt qu'aujourd'hui");
jaugeage.startDate.value = "jj/mm/aaaa";
}
else {
var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
var daychosen = myDays[thisDay];
if (daychosen != "Lundi") {
fieldFocus3("Lundi seul");
jaugeage.startDate.value = "jj/mm/aaaa";
}
else {
var mondate = new Date(passdate.valueOf());
var mody = mondate.getDate();
var monmo = mondate.getMonth()+1;
var monyr = mondate.getFullYear();
if (mody < 10){ mody = '0' + mody;}
if (monmo < 10){ monmo = '0' + monmo;}
var tuedate = new Date(passdate.valueOf() + (1 * 24 * 60 * 60 * 1000));
var tudy = tuedate.getDate();
var tuemo = tuedate.getMonth()+1;
var tueyr = tuedate.getFullYear();
if (tudy < 10){ tudy = '0' + tudy;}
if (tuemo < 10){ tuemo = '0' + tuemo;}
var weddate = new Date(passdate.valueOf() + (2 * 24 * 60 * 60 * 1000));
var wddy = weddate.getDate();
var wedmo = weddate.getMonth()+1;
var wedyr = weddate.getFullYear();
if (wddy < 10){ wddy = '0' + wddy;}
if (wedmo < 10){ wedmo = '0' + wedmo;}
var thurdate = new Date(passdate.valueOf() + (3 * 24 * 60 * 60 * 1000));
var thdy = thurdate.getDate();
var thurmo = thurdate.getMonth()+1;
var thuryr = thurdate.getFullYear();
if (thdy < 10){ thdy = '0' + thdy;}
if (thurmo < 10){ thurmo = '0' + thurmo;}
var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
var frdy = fridate.getDate();
var frimo = fridate.getMonth()+1;
var friyr = fridate.getFullYear();
if (frdy < 10){ frdy = '0' + frdy;}
if (frimo < 10){ frimo = '0' + frimo;}
document.getElementById('beginDate').innerHTML = mody+"/"+monmo+"/"+monyr;
document.getElementById('beginDateField').value = mody+"/"+monmo+"/"+monyr;
document.getElementById('endDate').innerHTML = frdy+"/"+frimo+"/"+friyr;
document.getElementById('FridayDate').innerHTML = frdy+"/"+frimo+"/"+friyr;
document.getElementById('endDateField').value = frdy+"/"+frimo+"/"+friyr;
document.getElementById('thursDate').innerHTML = thdy+"/"+thurmo+"/"+thuryr;
document.getElementById('thursDateField').value = thdy+"/"+thurmo+"/"+thuryr;
document.getElementById('wedsDate').innerHTML = wddy+"/"+wedmo+"/"+wedyr;
document.getElementById('wedsDateField').value = wddy+"/"+wedmo+"/"+wedyr;
document.getElementById('tuesDate').innerHTML = tudy+"/"+tuemo+"/"+tueyr;
document.getElementById('tuesDateField').value = tudy+"/"+tuemo+"/"+tueyr;
return true;
}
}
}
}
Here is the relevant HTML
<form id="Jaugeage" action="html_mail_process.php" method="post" name="jaugeage">
<table width="100%">
</tr>
<td align="center"><b><i>PREVISIONS DE JAUGEAGE SEMAINE DU </i></b>
<input type="text" size="12" maxlength="12" value="jj/mm/aaaa" name="startDate" tabindex="10" onKeyDown="if(event.keyCode==13) event.keyCode=9;" onChange="mondaycheck(this.value, this.form.txtFri);"/>
</td>
</tr>
<tr>
<td align="center"><textarea cols="30" name="txtLundimorn" rows="5" tabindex="11"></textarea></td>
</tr>
</table>
</form>
Can anybody see what is causing the problem with returning to the date field, or offer me another solution.
All of the validation works perfectly.
If the value fails to pass any one of these validation tests I want to give an alert and return to the date field for re-input, I use a small function for this.
The problem I have is that although the alert is given, the focus does not return to the correct field, it goes to the next field in the form sequence. I use "tabindex" to ensure that the fields are initially presented in the sequence I want.
Here is my JS
function fieldFocus3(msg) {
alert(msg);
document.jaugeage.startDate.select();
document.jaugeage.startDate.focus();
return false;
}
function mondaycheck(datechosen, fridaydate) {
var dtCh= "/";
var pos1=datechosen.indexOf(dtCh);
var pos2=datechosen.indexOf(dtCh,pos1+1);
if (pos1==-1 || pos2==-1){
fieldFocus3("Veuillez écrire la date de début comme ceci jj/mm/aaaa");
jaugeage.startDate.value = "jj/mm/aaaa";
}
if (pos1!=-1 && pos2!=-1){
var parts = datechosen.split('/');
var passdate = new Date(parseFloat(parts[2]),(parseFloat(parts[1])-1),parseFloat(parts[0]),23,59,59,999);
var thisDay=passdate.getDay();
Testtoday = new Date();
if(passdate < Testtoday) {
fieldFocus3("La date ne peut pas être plus tôt qu'aujourd'hui");
jaugeage.startDate.value = "jj/mm/aaaa";
}
else {
var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
var daychosen = myDays[thisDay];
if (daychosen != "Lundi") {
fieldFocus3("Lundi seul");
jaugeage.startDate.value = "jj/mm/aaaa";
}
else {
var mondate = new Date(passdate.valueOf());
var mody = mondate.getDate();
var monmo = mondate.getMonth()+1;
var monyr = mondate.getFullYear();
if (mody < 10){ mody = '0' + mody;}
if (monmo < 10){ monmo = '0' + monmo;}
var tuedate = new Date(passdate.valueOf() + (1 * 24 * 60 * 60 * 1000));
var tudy = tuedate.getDate();
var tuemo = tuedate.getMonth()+1;
var tueyr = tuedate.getFullYear();
if (tudy < 10){ tudy = '0' + tudy;}
if (tuemo < 10){ tuemo = '0' + tuemo;}
var weddate = new Date(passdate.valueOf() + (2 * 24 * 60 * 60 * 1000));
var wddy = weddate.getDate();
var wedmo = weddate.getMonth()+1;
var wedyr = weddate.getFullYear();
if (wddy < 10){ wddy = '0' + wddy;}
if (wedmo < 10){ wedmo = '0' + wedmo;}
var thurdate = new Date(passdate.valueOf() + (3 * 24 * 60 * 60 * 1000));
var thdy = thurdate.getDate();
var thurmo = thurdate.getMonth()+1;
var thuryr = thurdate.getFullYear();
if (thdy < 10){ thdy = '0' + thdy;}
if (thurmo < 10){ thurmo = '0' + thurmo;}
var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
var frdy = fridate.getDate();
var frimo = fridate.getMonth()+1;
var friyr = fridate.getFullYear();
if (frdy < 10){ frdy = '0' + frdy;}
if (frimo < 10){ frimo = '0' + frimo;}
document.getElementById('beginDate').innerHTML = mody+"/"+monmo+"/"+monyr;
document.getElementById('beginDateField').value = mody+"/"+monmo+"/"+monyr;
document.getElementById('endDate').innerHTML = frdy+"/"+frimo+"/"+friyr;
document.getElementById('FridayDate').innerHTML = frdy+"/"+frimo+"/"+friyr;
document.getElementById('endDateField').value = frdy+"/"+frimo+"/"+friyr;
document.getElementById('thursDate').innerHTML = thdy+"/"+thurmo+"/"+thuryr;
document.getElementById('thursDateField').value = thdy+"/"+thurmo+"/"+thuryr;
document.getElementById('wedsDate').innerHTML = wddy+"/"+wedmo+"/"+wedyr;
document.getElementById('wedsDateField').value = wddy+"/"+wedmo+"/"+wedyr;
document.getElementById('tuesDate').innerHTML = tudy+"/"+tuemo+"/"+tueyr;
document.getElementById('tuesDateField').value = tudy+"/"+tuemo+"/"+tueyr;
return true;
}
}
}
}
Here is the relevant HTML
<form id="Jaugeage" action="html_mail_process.php" method="post" name="jaugeage">
<table width="100%">
</tr>
<td align="center"><b><i>PREVISIONS DE JAUGEAGE SEMAINE DU </i></b>
<input type="text" size="12" maxlength="12" value="jj/mm/aaaa" name="startDate" tabindex="10" onKeyDown="if(event.keyCode==13) event.keyCode=9;" onChange="mondaycheck(this.value, this.form.txtFri);"/>
</td>
</tr>
<tr>
<td align="center"><textarea cols="30" name="txtLundimorn" rows="5" tabindex="11"></textarea></td>
</tr>
</table>
</form>
Can anybody see what is causing the problem with returning to the date field, or offer me another solution.