<html>
<title>Date Formatting Application </title>
<script language="JavaScript">
<!--
function form_checker()
{
var radio_choice = false;
for (counter = 0; counter < form.radio_button.length; counter++)
{
if (form.radio_button[counter].checked)
radio_choice = true;
}
if (document.form.input_date.value == "")
{
alert("You must enter a date.")
}
if (document.form.Format_string.value == "")
{
alert("- You must select both formatting string choices \n - Invalid option - 1 | 2 | 3 only are allowed.")
}
if (!radio_choice)
{
alert("No date format clicked.")
return (false);
}
return (true);
}
-->
</script>
<form method="post" action="output.asp" onsubmit="return form_checker()" name="form">
<b>Enter a date:
<br>
<input type="text" name="input_date">e.g. 1/2/2006 1:1:1 PM
<br>
<br>
Select format string (Choices 1: for mm/dd/yyyy 2 for dd/mm/yyyy 3 for dd/mm/yy):
<br>
<select name="Format_string" SIZE="1">
<option value="">Select format string</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<br>
<br>
<br>
Click any date format string:
<br>
<input type="radio" value="General Date" name="radio_button"> General Date (mm/dd/yyyy hh:mm:ss AM/PM) <br>
<input type="radio" value="Short Date" name="radio_button"> Short Date (dd/mm/yy) <br>
<input type="radio" value="Long Date" name="radio_button"> Long Date (day of week, month Name day, year) <br>
<br>
<input type="submit" value="Submit">
</b>
</form>
</body>
</html>
Above code I have written to validate the form. But the problem is that, all the field are checked once and then page forward itself (in Internet Explorer). I want this problem to be solve. If one field is error then message should be displayed and control remain there, unless all field is completed then only form be submitted.
if you explain a little better what you are doing, perhaps I could have written the regular expressions for you to validate the date format, but I'm not sure with the different selection and radio button options...
anyways, this should work for what you explained. I fixed up your HTML just a little bit and changed up your function.
Code:
<html>
<head>
<title>Date Formatting Application</title>
<script language="JavaScript">
<!--
function form_checker(formNode) {
var i, radio_choice = false;
if (formNode.input_date.value == "") {
alert("You must enter a date.");
formNode.input_date.focus();
return(false);
}
if (formNode.format_string.selectedIndex <= 0) {
alert("You must select a formatting string option \n - Invalid option - 1 | 2 | 3 only are allowed.");
formNode.format_string.focus();
return(false);
}
for (i = 0; i < formNode.radio_button.length; i++) {
if (formNode.radio_button[i].checked) {
radio_choice = true;
break;
}
}
if (!radio_choice) {
alert("No date format clicked.")
return(false);
}
return(true);
}
-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form method="post" action="output.asp" name="my_form" onsubmit="return(form_checker(this))">
<b>Enter a date:
<br>
<input type="text" name="input_date">e.g. 1/2/2006 1:1:1 PM <br><br>
Select format string (Choices 1: for mm/dd/yyyy 2 for dd/mm/yyyy 3 for dd/mm/yy):
<br>
<select name="format_string" SIZE="1">
<option value="">Select format string</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<br><br><br>
Click any date format string:<br>
<input type="radio" value="General Date" name="radio_button"> General Date (mm/dd/yyyy hh:mm:ss AM/PM) <br>
<input type="radio" value="Short Date" name="radio_button"> Short Date (dd/mm/yy) <br>
<input type="radio" value="Long Date" name="radio_button"> Long Date (day of week, month Name day, year) <br>
<br>
<input type="submit" value="Submit" name="btnSubmit">
</b>
</form>
</body>
</html>
I copied these codes, saved as an html page. When I tried to click submit button, it is not working, Javascript pop up box sholud appear telling me, please fill the empty text box.
