所以我想使用 jquery 为学校作业做一个验证函数，以确保在单击提交按钮时没有字段留空。我做了下面的代码，但它似乎没有用。有任何想法吗？谢谢
$(document).click(function () {
var name = $("#firstname").val();
var surname = $("#lastname").val();
var email = $("#email").val();
var comment = $("#comment").val();
if(name=="" || surname=="" || email=="" || comment==""){
alert("A field is missing");
} else {
return true;
}
});
编辑 1: 我更改了第一行，所以改为 .submit :
$('#valForm').submit(function(){
编辑 2: JS代码:
$(document).ready(function () {
$('#valForm').submit(function () {
var name = $("#firstname").val();
var surname = $("#lastname").val();
var email = $("#email").val();
var comment = $("#comment").val();
if (!name || !surname || !email || !comment) {
alert("A field is missing");
e.preventDefault();
return false;
} else {
return true;
}
})
});
HTML代码:(不要介意缩进)
<div id="question-box">
<form onsubmit="checkEmail()" id="valForm">
<h2>Contact the club</h2>
<label for="">First Name:</label>
<input type="text" name="firstname" id="firstname" placeholder="First Name"/>
<br>
<br>
<br>
<label for="">Last Name:</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name"/>
<br>
<br>
<br>
<label for="">Email:</label>
<input type="text" name="email" id="email" placeholder="email"/>
<br>
<br>
<br>
<label for="">Comments:
<br>
<br>
<br>
<br>
</label>
<input type="text" name="comments" id="comment">
<br>
<br>
<br>
<input type="submit" value="submit" id="submit">
</form>
</div>
好的，成功了。像往常一样愚蠢的错误......没有在我应该的地方调用脚本插件。感谢大家的耐心等待<3
最佳答案
确保返回 false 并在通过的事件对象上调用 e.preventDefault()...您需要在 .submit(function(e)) 来做到这一点
$(document).ready(function() {
$('#userCommentForm').submit(function(e) {
var name = $("#firstname").val();
var surname = $("#lastname").val();
var email = $("#email").val();
var comment = $("#comment").val();
if(name=="" || surname=="" || email=="" || comment==""){
alert("A field is missing");
e.preventDefault();
return false;
} else {
return true;
}
});
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="userCommentForm" action="myFormHandler.php">
<table>
<tr>
<td>First Name:</td>
<td><input id="firstname"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input id="lastname"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="email"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment"></textarea></td>
</tr>
<tr>
<td colspan="2">
<center>
<button type="submit">Post Comment</button>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>关于javascript - 单击提交按钮时的 Jquery 表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50765475/