2
私はjavascriptでフォームの検証を終了しようとしていますが、＃form＃タグで実行する.pyファイルのアクションも入れています。 しかし問題は、私がデータを提出した後、それが.pyアクションにリダイレクトされないことです。 はので、私はこの時点では、ファイルの.pyがexecutetdさ、でpreventDefault（）を取り除くが、フォーム検証カントの仕事は.........ここ javascriptフォームの検証とフォームのアクションの競合
<!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>
};
//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);
感謝を！ jQuery Ajaxをインポートする必要がありますか？ – leo
問題ありません！ jQuery JavascriptファイルをCDN経由でインポートするか、ローカルファイルを参照するだけです。 – Snake
このファイルは、https://code.jquery.com/ – Snake