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.