AJAX验证不起作用（启用/禁用提交按钮）
[英]AJAX validation not working(Submit button enabling/disabling)
问题描述
我的ajax表单有4个字段。
条件如下：
最初， submit按钮被禁用。
输入有效的未注册电子邮件ID和有效的手机号码后，应启用此submit按钮。
但是，即使我输入了注册的电子邮件ID并且启用了有效的手机号码按钮，但实际上应该将其禁用，因为输入的电子邮件ID已存在于数据库中。
图片1
图片2：
程式码片段：
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function()
{
$("#email").change(function()
{
var eml = $("#email").val();
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "echeck.php",
data: "email="+ eml,
success: function(msg)
{
$("#status").ajaxComplete(function(event, request, settings)
{
if(msg == 'Not Exists')
{
$("#email").removeClass('object_error'); // if necessary
$("#email").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
});
$("#mobile").change(function()
{
var mbe = $("#mobile").val();
if(mbe.length >= 10)
{
$("#mstatus").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "mcheck.php",
data: "mobile="+ mbe,
success: function(msg)
{
$("#mstatus").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#mobile").removeClass('object_error'); // if necessary
$("#mobile").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#mstatus").html('<font color="red">The Mobile should have at least <strong>10</strong> characters.</font>');
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#proposedby").change(function()
{
var pisa = $("#proposedby").val();
if(pisa.length >= 4)
{
$("#proposedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "pcheck.php",
data: "proposedby="+ pisa,
success: function(msg)
{
$("#proposedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#proposedby").removeClass('object_error'); // if necessary
$("#proposedby").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
$(this).html(msg);
}
});
}
});
}
else
{
$("#proposedby_status").html('<font color="red">The Proposed by ISA No should have at least <strong>4</strong> characters.</font>');
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#secondedby").change(function()
{
var sisa = $("#secondedby").val();
if(sisa.length >= 4)
{
$("#secondedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "scheck.php",
data: "secondedby="+ sisa,
success: function(msg)
{
$("#secondedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#secondedby").removeClass('object_error'); // if necessary
$("#secondedby").addClass("object_ok");
$(this).html(' ');
$('#submit').removeAttr('disabled');
}
else
{
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#secondedby_status").html('<font color="red">The Seconded by ISA No should have at least <strong>4</strong> characters.</font>');
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$('#submit').attr('disabled', 'disabled');
});
-->
</script>
<center>
<div align="center">
<h2 align="center">AJAX Username Verification</h2>
<form action="#" method="post">
<table width="700" border="0">
<tr>
<td width="200"><div align="right">Email-Id: </div></td>
<td width="100"><input type="email" id="email" name="email" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,3}$" /></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Mobile: </div></td>
<td width="100"><input type="text" name="mobile" id="mobile" pattern="^[0-9-]+" maxlength="10" /></td>
<td width="400" align="left"><div id="mstatus"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Proposed By (Isa no): </div></td>
<td width="100"><input type="text" name="proposedby" id="proposedby" /></td>
<td width="400" align="left"><div id="proposedby_status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Seconded By (Isa no): </div></td>
<td width="100"><input type="text" name="secondedby" id="secondedby" /></td>
<td width="400" align="left"><div id="secondedby_status"></div></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" id="submit" value="submit" /></td>
</tr>
</table>
</form>
</div>
</center>
1 个解决方案
解决方案1
0 已采纳 2015-05-07 12:49:33
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function()
{
var flagemail=false;
var flagemobile=false;
var flagepropesed=false;
var flagesecondby=false;
$("#email").change(function()
{
var eml = $("#email").val();
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "echeck.php",
data: "email="+ eml,
success: function(msg)
{
$("#status").ajaxComplete(function(event, request, settings)
{
if(msg == 'Not Exists')
{
$("#email").removeClass('object_error'); // if necessary
$("#email").addClass("object_ok");
$(this).html(' ');
flagemail=true;
}
else
{
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
});
$("#mobile").change(function()
{
var mbe = $("#mobile").val();
if(mbe.length >= 10)
{
$("#mstatus").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "mcheck.php",
data: "mobile="+ mbe,
success: function(msg)
{
$("#mstatus").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#mobile").removeClass('object_error'); // if necessary
$("#mobile").addClass("object_ok");
$(this).html(' ');
flagemobile=true;
}
else
{
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#mstatus").html('<font color="red">The Mobile should have at least <strong>10</strong> characters.</font>');
$("#mobile").removeClass('object_ok'); // if necessary
$("#mobile").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#proposedby").change(function()
{
var pisa = $("#proposedby").val();
if(pisa.length >= 4)
{
$("#proposedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "pcheck.php",
data: "proposedby="+ pisa,
success: function(msg)
{
$("#proposedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#proposedby").removeClass('object_error'); // if necessary
$("#proposedby").addClass("object_ok");
$(this).html(' ');
flagepropesed=true;
}
else
{
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
$(this).html(msg);
}
});
}
});
}
else
{
$("#proposedby_status").html('<font color="red">The Proposed by ISA No should have at least <strong>4</strong> characters.</font>');
$("#proposedby").removeClass('object_ok'); // if necessary
$("#proposedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$("#secondedby").change(function()
{
var sisa = $("#secondedby").val();
if(sisa.length >= 4)
{
$("#secondedby_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "scheck.php",
data: "secondedby="+ sisa,
success: function(msg)
{
$("#secondedby_status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$("#secondedby").removeClass('object_error'); // if necessary
$("#secondedby").addClass("object_ok");
$(this).html(' ');
flagesecondby=true;
}
else
{
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$(this).html(msg);
$('#submit').attr('disabled', 'disabled');
}
});
}
});
}
else
{
$("#secondedby_status").html('<font color="red">The Seconded by ISA No should have at least <strong>4</strong> characters.</font>');
$("#secondedby").removeClass('object_ok'); // if necessary
$("#secondedby").addClass("object_error");
$('#submit').attr('disabled', 'disabled');
}
});
$('#submit').attr('disabled', 'disabled');
// Check This If all Flags are true then remove
if(flagemail==true && flagemobile==true && flagepropesed==true && flagesecondby == true)
{
$('#submit').removeAttr('disabled');
}
});
-->
</script>
<center>
<div align="center">
<h2 align="center">AJAX Username Verification</h2>
<form action="#" method="post">
<table width="700" border="0">
<tr>
<td width="200"><div align="right">Email-Id: </div></td>
<td width="100"><input type="email" id="email" name="email" pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,3}$" /></td>
<td width="400" align="left"><div id="status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Mobile: </div></td>
<td width="100"><input type="text" name="mobile" id="mobile" pattern="^[0-9-]+" maxlength="10" /></td>
<td width="400" align="left"><div id="mstatus"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Proposed By (Isa no): </div></td>
<td width="100"><input type="text" name="proposedby" id="proposedby" /></td>
<td width="400" align="left"><div id="proposedby_status"></div></td>
</tr>
<tr>
<td width="200"><div align="right">Seconded By (Isa no): </div></td>
<td width="100"><input type="text" name="secondedby" id="secondedby" /></td>
<td width="400" align="left"><div id="secondedby_status"></div></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" id="submit" value="submit" /></td>
</tr>
</table>
</form>
</div>
</center>
试试这个可能对你有帮助
使用ajax验证时禁用提交按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.