Validate form data before submit and based on validation execute another function with javascript
I am new to web development. I am creating a magazine application. For the time being, I will authorize the form elements. You need to check if all fields are filled in and then export the form data to excel.
I wrote below code, please think i am new to this before shooting me about code ethics.
I am not currently focusing on the CSS part, so I don't have a css file.
<html>
<head>
<script type="text/javascript" language="javascript">
function WriteToFile(passForm) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\\sample.csv";
var file = fso.openTextFile(fileLoc, 8, true, 0);
file.writeline(passForm.inputText.value + ',' +
passForm.timeSpent.value + ',' +
passForm.SystemDate.value + ',' +
passForm.UserName.value);
file.Close();
alert('File created successfully at location: ' + fileLoc);
}
onload = function systemDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = mm + '/' + dd + '/' + yyyy;
document.getElementById("date").value = today;
}
</script>
</head>
<body>
<p>Happily log your effort!</p>
<form>
Ticket Number : <input id="inc" type="text" name="inputText" required="true" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" required="true" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
<input type="Submit" value="submit" onclick="WriteToFile(this.form)">
</form>
</body>
</html>
Please help me to successfully validate all fields and export data.
This is much simpler code where I want the checked field elements, but still the form data is exported even if the required fields are empty and the validation is actually done after the export.
source to share
Try this - note that I was pragmatic and used the loading and form access of the element - this is because it will work in all browsers without loading things like jQuery etc. I haven't tested a valid date either. There are thousands of scripts that do this.
Also note that you need to remove the required if you want to do some simple error handling yourself. If you want custom error handling to take care of HTML5 you will run into compatibility issues in IE <11
Required HTML5 form attribute. Set up custom validation confirmation?
So this method uses a simple check now I removed the required
<html>
<head>
<script>
function WriteToFile(passForm) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\\sample.csv";
var file = fso.openTextFile(fileLoc, 8, true, 0);
file.writeline(passForm.inputText.value + ',' +
passForm.timeSpent.value + ',' +
passForm.SystemDate.value + ',' +
passForm.UserName.value);
file.Close();
alert('File created successfully at location: ' + fileLoc);
}
function pad(num) {return String("0"+num).slice(-2)}
function systemDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
document.getElementById("date").value = pad(mm) + '/' + pad(dd) + '/' + yyyy;
}
window.onload=function() {
systemDate();
document.getElementById("myForm").onsubmit=function() {
if (this.inputText.value=="") {
alert("Please enter Ticket Number");
this.inputText.focus();
return false;
}
if (this.timeSpent.value=="") {
alert("Please enter TimeSpent");
this.timeSpent.focus();
return false;
}
WriteToFile(this);
return false; // cancel submit
}
}
</script>
</head>
<body>
<p>Happily log your effort!</p>
<form id="myForm">
Ticket Number : <input id="inc" type="text" name="inputText" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
<input type="Submit" value="submit">
</form>
</body>
</html>
source to share