Php 如果字段为空，如何停止表单提交？
我的网站只基于一个Php 如果字段为空，如何停止表单提交？,php,jquery,forms,Php,Jquery,Forms,我的网站只基于一个php索引文件，该文件根据标题变量更改网站内容www.mydomain.com/？page=contact加载并调出一张我正在让用户填写的表单 我有一些jQuery，它应该检测是否有任何缺少的字段： $("form").submit(function() { var isFormValid = true; $(".required").each(function() { if ($.trim($(this).val()) == "") {
phpwww.mydomain.com/？page=contactjQuery$("form").submit(function() {
var isFormValid = true;
$(".required").each(function() {
if ($.trim($(this).val()) == "") {
$(this).addClass("highlight");
isFormValid = false;
} else {
$(this).removeClass("highlight");
}
if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
return isFormValid;
});
});
但它不起作用….将
返回值设置为有效超出循环（否则您会一次又一次地覆盖它的值））：
也许是这样的
$("form").submit(function() {
var isFormValid = true;
$(".required").each(function() {
if ($.trim($(this).val()) == "") {
$(this).addClass("highlight");
isFormValid = false;
} else {
$(this).removeClass("highlight");
}
});
// the following lines should be placed here
if (!isFormValid) {
alert("Please fill in all the required fields (indicated by *)");
}
return isFormValid;
});
甚至更短：
$("form").submit(function() {
var isFormValid = $(".required").removeClass("highlight").filter(function() {
return $.trim(this.value) == "";
}).addClass("highlight").length == 0;
if (!isFormValid) {
alert("Please fill in all the required fields (indicated by *)");
}
return isFormValid;
});
演示：你能为我发布html作品吗。
这是我的密码：
------------------------
$（文档）.ready（函数（）{
$（“表格”）。提交（函数（）{
var isFormValid=true；
$（“.required”）。每个（函数（）{
if（$.trim（$（this）.val（））==“”）{
$（此）.addClass（“突出显示”）；
isFormValid=false；
}否则{
$（此）.removeClass（“突出显示”）；
}
如果（！isFormValid）警报（“请填写所有必填字段（用*）”；
返回是有效的；
});
});
});
#divMain{垂直对齐：底部；}
.div1_样式{背景：#ffe4b5}
.div2_样式{背景：#79b7e7}
.突出显示{背景：#cd0a0a}
.div_禁用_样式{背景：#6f6e73}
提交
实际上可以在两个位置都返回，在每个循环内部返回它只会取消循环的其余部分，但您完全正确，必须在外部执行sure@NoahPassalacqua：我已更新代码，将下面的“移动如果条件”移动到“移动如果条件超出循环”`if（！isFormValid）警报(“请填写所有必填字段（用*）”；“您也在验证单选按钮和复选框吗？@noahpasalacqua：您看到val（）
不适用于单选按钮。在循环中，您必须检查循环元素是否为单选按钮，并使用is（':checked'）
$("form").submit(function() {
var isFormValid = $(".required").removeClass("highlight").filter(function() {
return $.trim(this.value) == "";
}).addClass("highlight").length == 0;
if (!isFormValid) {
alert("Please fill in all the required fields (indicated by *)");
}
return isFormValid;
});
Can you post the html works perfectly fine for me.
Here is my Code :
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
var isFormValid = true;
$(".required").each(function() {
if ($.trim($(this).val()) == "") {
$(this).addClass("highlight");
isFormValid = false;
} else {
$(this).removeClass("highlight");
}
if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");
return isFormValid;
});
});
});
</script>
<style type="text/css">
#divMain {vertical-align: bottom;}
.div1_style {background: #ffe4b5}
.div2_style {background: #79b7e7}
.highlight {background: #cd0a0a}
.div_disabled_style {background: #6f6e73}
</style>
</head>
<body>
<form action="#" method="post">
<div id="divMain" align="center">
<div id="div1" class="div2_style">
<input type="checkbox" id="checkBox1">
<input type="text" class ="required" id="text1"/>
<input type="text" class ="required" id="text2"/>
<input type="text" class ="required" id="text3"/>
<button type="submit" id="btnSubmit">Submit</button>
</div>
</div>
</form>
</body>
</html>