Question

我正在尝试通过javascript完成表单验证，并使用.py文件执行操作以在#form＃标签中执行。但问题是，在我提交数据后，它不会重定向到.py动作。所以我摆脱了preventdefault（），此时，.py文件是executetd，但表单验证无法正常工作.........

<!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>&copy; 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);

Answer 1

您可以离开e.preventDefault();，然后使用jQuery Ajax调用在使用以下命令验证输入后将数据发送到.py文件：

$.post("hello.py", $("form").serializeArray(), function(result) {
    // handle response here
}

javascript表单验证和表单操作冲突

1 个答案: