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

我想通过javascript完成表单验证，并且还要将.py文件放在＃form＃标签中执行。但问题是，当我提交数据后，它不会重定向到.py动作。所以我摆脱了preventDefault（）方法的，在这个时候，.py文件被executetd，但表单验证着工作.........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>&copy; Algonquin college registration office.</p> 
     </footer> 
    </div> 
<script src="scripts/validate.js"></script> 
<script src="scripts/events.js"></script> 
</body> 
</html>

这里是javascript文件：

};

//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);

来源

2016-11-26 leo

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

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

来源

2016-11-26 17:15:09 Snake

的感谢！所以我需要导入jQuery Ajax？ – leo

没问题！您只需要通过CDN导入jQuery Javascript文件或引用本地文件。 – Snake

你可以在这里下载或获取该文件的链接：https：//code.jquery.com/ – Snake

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

回答

相关问题