Menu
I am new to javascript and I am facing the following issue:
I made a simple date accepting form which checks the format before submission. In case the entered date is not in the desired format, it shows an error. Now, I replace the submit button on the form with a link using another javascript function. I link it to javascript:document.forms[0].submit(). This time, the format checking function is not called during form submission. It gets submitted without the check. It would be nice if someone could tell me how to overcome this issue.
function checkDate() {
var date = document.getElementById("date");
var dt = date.value;
var flag = 1;
var msg = "";
var errorHere = document.getElementById("spam");
for (var i = 0; i < dt.length; i++) {
if (i == 2 || i == 5) {
if (dt[i] != '-') {
flag = 0;
break;
}
continue;
}
if (dt[i] < '0' || dt[i] > '9') {
flag = 0;
break;
}
}
if (dt.length != 10) flag = 0;
if (dt.length == 0) flag = -1;
if (flag == 0)
msg += "Invalid format.";
else if (flag == -1)
msg += "Empty field."
else msg += "OK.";
errorHere.firstChild.nodeValue = msg;
if (flag == 1) return true;
else return false;
}
function submitter() {
var abc = confirm("Would you like to switch to link?");
if (abc == true) {
var i = 0,
now;
while (++i) {
now = document.getElementsByTagName("input")[i];
if (!now) return;
if (now.type == "submit") break;
}
var latest = document.createElement("a");
latest.href = "javascript:document.forms[0].submit()";
var text = document.createTextNode(now.value);
latest.appendChild(text);
now.parentNode.replaceChild(latest, now);
}
}
window.onload = submitter;<head>
<script type="text/javascript" src="date.js">
</script>
</head>
<body>
<h1>Date checker</h1>
<form action="eventssearch.php" method="post" onsubmit="return checkDate();">
<p>
<label for="date">Date in the format DD-MM-YYYY:</label>
<br />
<input type="text" id="date" name="date" />
<input type="submit" value="Check" />
<br />(example 01-01-1970)
<p id="spam"></p>
</p>
</form>
</body>Gramercy...
202
asked Sep 09 '26 06:09
Instead of using
"javascript:document.forms[0].submit()"
you can call your own function that will call the validation function and submit if the form is valid:
`javascript:singleSumbitFunc()`
This same function can then be set as the form's onsubmit function as well.
<form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()">
Example function:
function singleSubmitFunc() {
var form = document.forms[0];
// here is the where your validation function is called
// .call() is to set the form as 'this'
var formIsValid = checkDate.call(form);
if (formIsValid) {
form.submit();
}
return false; // this prevents normal submit if called by form
}
The reason you need to do this is because the submit event is not fired when using .submit() in your code/link. The function used in this example will call the desired function directly.
The onsubmit handling was adapted from this SO answer
function checkDate() {
document.getElementById('checkDateFeedBack').innerText = 'checkDate() fired! at ' + new Date().toLocaleString();
var date = document.getElementById("date");
var dt = date.value;
var flag = 1;
var msg = "";
var errorHere = document.getElementById("spam");
for (var i = 0; i < dt.length; i++) {
if (i == 2 || i == 5) {
if (dt[i] != '-') {
flag = 0;
break;
}
continue;
}
if (dt[i] < '0' || dt[i] > '9') {
flag = 0;
break;
}
}
if (dt.length != 10) flag = 0;
if (dt.length == 0) flag = -1;
if (flag == 0)
msg += "Invalid format.";
else if (flag == -1)
msg += "Empty field."
else msg += "OK.";
errorHere.innerText = msg;
if (flag == 1) return true;
else return false;
}
function singleSubmitFunc(event) {
var form = document.forms[0];
// here is the where your validation function is called
// .call() is to set the form as 'this'
var formIsValid = checkDate.call(form);
if (formIsValid) {
form.submit();
document.getElementById('checkDateFeedBack').innerText = 'Valid form has been submitted!';
}
return false; // prevent normal submit if called by form
}
function submitter() {
var abc = confirm("Would you like to switch to link?");
if (abc == true) {
var i = 0,
now;
while (++i) {
now = document.getElementsByTagName("input")[i];
if (!now) return;
if (now.type == "submit") break;
}
var latest = document.createElement("a");
latest.href = "javascript:singleSubmitFunc()"; // calls custom form submit function
var text = document.createTextNode(now.value);
latest.appendChild(text);
now.parentNode.replaceChild(latest, now);
}
}
window.onload = submitter;.error {
color: #c00;
font-weight: bold;
}<head>
<script type="text/javascript" src="date.js">
</script>
</head>
<body>
<h1>Date checker</h1>
<form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()">
<p>
<label for="date">Date in the format DD-MM-YYYY:</label>
<br />
<input type="text" id="date" name="date" />
<input type="submit" value="Check" />
<br />(example 01-01-1970)
<p id="spam"></p>
<p id="checkDateFeedBack"></p>
</p>
</form>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
