个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
37
4
我正在尝试通过 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/
37
4
0
在 JSF2 应用程序中遇到验证属性的问题时，有两种主要方法。 使用 Annotation 在 ManagedBean 上定义验证 @ManagedBean public class MyBean {
我想实现一个不常见的功能，我认为 jquery 验证插件将是最好的方法(如果您在没有插件的情况下建议和回答，我们也会欢迎)。我想在用户在输入字段中输入正确的单词后立即隐藏表单。我试过这个: $("
我有几个下拉菜单(类名为month_dropdown)，并且下拉菜单的数量不是恒定的。我怎样才能为它们实现 NotEqual 验证。我正在使用 jQuery 验证插件。 这就是我写的 - jQuery
我设法制作了这个网址验证代码并且它起作用了。但我面临着一个问题。我认为 stackoverflow 是获得解决方案的最佳场所。 function url_followers(){ var url=do
我目前正在使用后端服务，该服务允许用户在客户端应用程序上使用 Google Games 库登录。 用户可以通过他们的 gplay ID 向我们发送信息，以便登录或恢复旧帐户。用户向我们发送以下内容，包
我正在尝试验证输入以查看它是否是有效的 IP 地址(可能是部分地址)。 可接受的输入:172、172.112、172.112.113、172.112.113.114 Not Acceptable 输入
我从 Mongoose 验证中得到这条消息: 'Validator failed for path phone with value ``' 这不应该发生，因为不需要电话。 这是我的模型架构: var
我一直在尝试使用Python-LDAP (版本 2.4.19)在 MacOS X 10.9.5 和 Python 2.7.9 下 我想在调用 .start_tls_s() 后验证与给定 LDAP 服务
我正在处理一个仅与 IE6 兼容的旧 javascript 项目(抱歉...)，我想仅在 VS 2017 中禁用此项目的 ESLint/CSLint/Javascript 验证/CSS 验证。 我知道
我正在寻找一种方法来验证 Spring 命令 bean 中的 java.lang.Double 字段的最大值和最小值(一个值必须位于给定的值范围之间)，例如, public final class W
我正在尝试在 springfuse(JavaEE 6 + Spring Framework (针对 Jetty、Tomcat、JBoss 等)) 和 maven 的帮助下构建我的 webapps 工作
我试图在我们的项目中使用 scalaz 验证，但遇到了以下情况: def rate(username: String, params: Map[String, String]): Validation
我有一个像这样的 Yaml 文件 name: hhh_aaa_bbb arguments: - !argument name: inputsss des
我有一个表单，人们可以单击并向表单添加字段，并且我需要让它在单击时验证这些字段中的值。 假设我单击它两次并获取 2 个独立的字段集，我需要旋转 % 以确保它在保存时等于 100。 我已放入此函数以使其
在我的页面中有一个选项可以创建新的日期字段输入框。用户可以根据需要创建尽可能多的“截止日期”和“起始日期”框。就像， 日期_to1 || date_from1 日期到2 ||日期_from2 date
我有一个像这样的 Yaml 文件 name: hhh_aaa_bbb arguments: - !argument name: inputsss des
有没有办法在动态字段上使用 jquery 验证表单。 我想将其设置为必填字段 我正在使用 Jsp 动态创建表单字段。 喜欢 等等...... 我想使用必需的表单字段验证此表单字段。 最佳答
嗨，任何人都可以通过提供 JavaScript 代码来帮助我验证用户名文本框不应包含数字，它只能包含一个字符。 最佳答案 使用正则表达式: (\d)+ 如果找到匹配项，则字符串中就有一个数字。 关于J
我有两个输入字段holidayDate和Description(id=tags) $(document).ready(function() {
我遇到了这个问题，这些验证从电子邮件验证部分开始就停止工作。 我只是不明白为什么即使经过几天的观察，只是想知道是否有人可以在这里指出我的错误？ Javascript部分: function valid
我是一名优秀的程序员,十分优秀！