我正在尝试通过 javascript 完成表单验证，并在 #form# 标记中放置一个要执行的 .py 文件操作。 但问题是，当我提交数据后，它不会重定向到 .py 操作。 所以我摆脱了 preventdefault()，此时，.py 文件已执行，但表单验证无法正常工作.........
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student grade registration system</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<header class="masthead">
<h1>Student grade system</h1>
</header>
<section class="main">
<p>Please fill out this form correctly and click 'save' to save it. after that, you can click 'results' to see your grade results.
If there is any concern, please contact your coordinator for details.</p>
<form name="sgs" action="hello.py" method="post">
<div class="formbox">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" autocomplete="off" placeholder="your first name" class="med" />
<span id="fnameWarning" class="alert"></span>
</div>
<div class="formbox">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" autocomplete="off" placeholder="your last name" class="med" />
<span id="lnameWarning" class="alert"></span>
</div>
<div class="formbox">
<label for="studentnumber">Student Number</label>
<input type="text" name="studentnumber" id="studentnumber" pattern="[0-9]{6}" title="must be a 6-digit number" autocomplete="off" placeholder="your student number" class="med" />
<span id="studentnumberWarning" class="alert"></span>
</div>
<div class="formbox">
<label for="course">Course</label>
<select name="course" id="course" class="med">
<option value="1" selected>Course</option>
<option value="2">CST8260</option>
<option value="3">CST8209</option>
<option value="4">MAD9013</option>
<option value="5">CST8279</option>
</select><span id="courseWarning" class="alert"></span>
</div>
<div class="formbox">
<label for="Work type">Work type</label>
<select name="Worktype" id="worktype" class="med">
<option value="1" selected>Work type</option>
<option value="2">Assignments</option>
<option value="3">Midterms</option>
<option value="4">Final Exam</option>
</select><span id="worktypeWarning" class="alert"></span>
</div>
<div class="formbox">
<label for="grade">Grade</label>
<input type="text" name="grade" id="grade" pattern="[,0-9]{1,}" title="must be a grade between 0 and 100" placeholder="your grade, use commas to seperate them" class="med" />
<span id="gradeWarning" class="alert"></span>
</div>
<div class="formbox">
<div class="formbox buttons">
<input type="submit" value="Save" id="submitbtn" class="btn"/>
</div>
<div class="formbox">
<div class="formbox buttons">
<a href="display.html"> <input type="button" value="results" class="btn" /></a>
</div>
</form>
</section>
<footer class="footer">
<p>© Algonquin college registration office.</p>
</footer>
</div>
<script src="scripts/validate.js"></script>
<script src="scripts/events.js"></script>
</body>
</html>
这是javascript文件:
function validate(e){
e.preventDefault();
var valid=true;
if(sgs.firstname.value === ""){
document.getElementById('fnameWarning').innerHTML="*Please enter a first name*";
valid = false;
}
if(sgs.lastname.value == ""){
document.getElementById('lnameWarning').innerHTML="*Please enter a last name*";
valid=false;
}
if(sgs.studentnumber.value == ""){
document.getElementById('studentnumberWarning').innerHTML="*Please enter a student number*";
valid=false;
}
if(sgs.grade.value == ""){
document.getElementById('gradeWarning').innerHTML="*Please enter a grade*";
valid=false;
}
if(sgs.course.options.selectedIndex === 0){
document.getElementById('courseWarning').innerHTML="*Please select a course*";
valid = false;
}
if(sgs.worktype.options.selectedIndex === 0){
document.getElementById('worktypeWarning').innerHTML="*Please select a work type*";
valid = false;
}
if(valid){
alert("Thank you! please click 'results' to see the results");
}
return valid;
};
//form element events
document.getElementById("firstname").addEventListener("blur", function(){
if(this.value !== ""){
fnameWarning.innerHTML = "";
}
});
document.getElementById("lastname").addEventListener("blur", function(){
if(this.value !== ""){
lnameWarning.innerHTML = "";
}
});
document.getElementById("studentnumber").addEventListener("blur", function()
if(this.value !== ""){
studentnumberWarning.innerHTML = "";
}
});
document.getElementById("grade").addEventListener("blur", function(){
if(this.value !== ""){
gradeWarning.innerHTML = "";
}
});
document.getElementById("course").addEventListener("click", function(){
if(sgs.course.options.selectedIndex !== 0){
courseWarning.innerHTML = "";
}
});
document.getElementById("worktype").addEventListener("click", function(){
if(sgs.worktype.options.selectedIndex !== 0){
worktypeWarning.innerHTML = "";
}
});
document.sgs.addEventListener("submit", validate);
最佳答案
您可以保留 e.preventDefault();，然后在验证输入后使用 jQuery Ajax 调用将数据发送到 .py 文件:
$.post("hello.py", $("form").serializeArray(), function(result) {
// handle response here
}
关于javascript表单验证和表单 Action 冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40820623/