我用 HTML 创建了一个简单的表单，它使用 JavaScript 将数据提交到 Microsoft CDS。表单提交正常。
我想进行一些验证以确保字段必须填写(没有空字段)，因此我使用了 javascript 表单验证。我只对前两个字段进行了验证:标题和名字。
验证有效，弹出一条消息，提示“标题不能为空”和“名字不能为空” - 但是...表单仍然会提交!
我认为问题在于我使用了两个单独的脚本，一个用于运行验证，一个用于提交数据。如何将两者结合起来？
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<! -- JQUERY LINK -->
<script src="jq.min.js"></script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input, select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
button {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<script>
function validateform(){
var title=document.myform.Title.value;
var firstname=document.myform.FirstName.value;
if (title==null || title==""){
alert("Title can't be blank");
return false;
}else if (firstname==null || firstname==""){
alert("Firstname can't be blank.");
return false;
}
}
</script>
<h3>Contact Form to submit to SP List</h3>
<! -- HTML FORM BELOW -->
<div class="container">
<form name="myform" onsubmit="return validateform()">
<! -- HTML INPUT -->
<label>Title</label>
<input type="text" id="Title" placeholder="Your title...">
<label>First Name</label>
<input type="text" id="FirstName" placeholder="Your forename..">
<label>Last Name</label>
<input type="text" id="LastName" placeholder="Your surname..">
<label>Date</label><br>
<input type="date" id="Date" placeholder="Your surname..">
<label>Country</label>
<select id="Country">
<option value="England">England</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
</select>
<label>Message</label>
<textarea id="Message" placeholder="Write something.." style="height:200px"></textarea>
<! -- HTML SUBMISSION -->
<button id="btn_submit">Submit</button>
<input id="postResult" type="text" value="Submission status: Awaiting submission" readonly>
</form>
</div>
<! -- JS BELOW -->
<script>
$(function () {
$("#btn_submit").click(function () {
var formData = {
Title: $("#Title").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Message: $("#Message").val(),
Country: $("#Country").val(),
Date: $("#Date").val()
};
$.ajax({
contentType: 'application/json',
type: "POST",
url: "XXXXXXXXXXXX",
data: JSON.stringify(formData),
success: function () {
$("#postResult").val("Submission status: Success");
},
error: function () {
$("#postResult").val("Submission status: Failed");
}
});
});
});
</script>
</body>
</html>
最佳答案
发生这种情况是因为您没有使用提交按钮来提交表单，而是使用了单击时启动 AJAX POST 的常规按钮，并且您尝试使用 onsubmit 来阻止表单提交。 .
为了不提交表单，您应该使用带有输入提交按钮的默认表单 POST，并将 false 返回到 onsubmit 。或者在单击按钮时调用验证，如果通过验证则调用 AJAX 方法。不要调用像 $("#btn_submit").click(function ()) 这样的 AJAX 方法因为一旦用户单击按钮，这种情况就会发生，并且您无法阻止它，因此您应该调用验证并使用 if您要么调用 AJAX 方法，要么不调用。
使用你的代码，它会是这样的:
<! -- JS BELOW -->
<script>
function validateForm(){
var title=document.myform.Title.value;
var firstname=document.myform.FirstName.value;
if (title==null || title==""){
alert("Title can't be blank");
return false;
}else if (firstname==null || firstname==""){
alert("Firstname can't be blank.");
return false;
}else{
return true;
}
}
$(function () {
$("#btn_submit").click(function () {
if(validateForm()){
var formData = {
Title: $("#Title").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Message: $("#Message").val(),
Country: $("#Country").val(),
Date: $("#Date").val()
};
$.ajax({
contentType: 'application/json',
type: "POST",
url: "XXXXXXXXXXXX",
data: JSON.stringify(formData),
success: function () {
$("#postResult").val("Submission status: Success");
},
error: function () {
$("#postResult").val("Submission status: Failed");
}
});
}
});
});
</script>
</body>
关于当输入空数据时，Javascript表单验证仍然提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68018021/