Php jQuery-AJAX表单验证
我是jQuery新手,我尝试验证表单。如果数据库中已经有标题,我想用ajax和php进行搜索。下面由我编写的代码有效,如果标题已在db中,则返回1;如果标题未在db中,则返回0。在此之后,我想向title textfield添加一个类。最后,我搜索title textfield是否具有该类,如果为true,则停止表单,否则提交 即使php返回1,我的脚本也会不断提交表单。我做错了什么Php jQuery-AJAX表单验证,php,jquery,ajax,forms,validation,Php,Jquery,Ajax,Forms,Validation,我是jQuery新手,我尝试验证表单。如果数据库中已经有标题,我想用ajax和php进行搜索。下面由我编写的代码有效,如果标题已在db中,则返回1;如果标题未在db中,则返回0。在此之后,我想向title textfield添加一个类。最后,我搜索title textfield是否具有该类,如果为true,则停止表单,否则提交 即使php返回1,我的脚本也会不断提交表单。我做错了什么 // Process PHP file $.ajax({ beforeSend: function() {
// Process PHP file
$.ajax({
beforeSend: function()
{
// Show loading
$('#msg_search_load').removeAttr('style');
},
type: "GET",
url: "ajax_actions.php",
data: "action=search_category_add&title="+$("#category_title").val(),
dataType: "json",
cache: false,
success: function(html)
{
console.log("Category already exists: "+html.category_found);
if(html.category_found == 1)
{
$('#msg_search_load').css({ 'display': 'none' });
$('#msg_search_category').removeAttr('style');
$("#category_title").addClass("already_exists");
}
},
complete: function()
{
// Hide loading
$('#msg_search_load').css({ 'display': 'none' });
}
});
if($("#category_title").hasClass("already_exists")) { return false; }
这是HTML表单
<form name="add_category" id="add_category" action="<?php echo $s_website_url; ?>/category_add.php" method="post">
<input type="hidden" name="action" value="add_category">
<table cellpadding="4" cellspacing="0">
<tr>
<td width="120">
<label for="category_title">Category title:</label>
</td>
<td>
<div class="content_msg" style="display: none;" id="msg_search_load"><img src="<?php echo $s_website_url; ?>/images/icons/loading.gif" class="content_msg_icon" alt="Warning"> Searching if category already exists.</div>
<div class="content_msg" style="display: none;" id="msg_search_category"><img src="<?php echo $s_website_url; ?>/images/icons/warning.png" class="content_msg_icon" alt="Warning"> Category already exists.</div>
<input type="text" name="category_title" id="category_title" class="form_textfield">
`<div class="content_count_chars" id="count_category_title"><span class="content_count_chars_green">100</span> characters remaining</div>
</td>
</tr>
</table>
<div align="center">
<!-- Fix Opera input focus bug -->
<input type="submit" value="Submit" style="display: none;" id="WorkaroundForOperaInputFocusBorderBug">
<!-- Fix Opera input focus bug -->
<input type="submit" value="Submit" class="form_submit">
</div>
</form>
我解决了这个问题。我不得不在AJAX设置中添加
async:false
AJAX是异步的,这基本上意味着它不会阻塞
脚本的执行(这很好,因为您的网站没有)
装载时冻结)
工作代码现在如下所示:
$.ajax({
url: "ajax_actions.php",
type: "GET",
data: { action: "search_category_add", title: $("#category_title").val() },
dataType: "json",
async: false,
success: function(result)
{
// console.log("Category already exists: "+result.category_found);
if(result.category_found == 1)
{
// console.log("Category already exists: Inside if");
$('#msg_search_category').removeAttr('style');
validationErrors++;
}
}
});
if(validationErrors > 0) { return false; }
我解决了这个问题。我不得不在AJAX设置中添加
async:false
AJAX是异步的,这基本上意味着它不会阻塞
脚本的执行(这很好,因为您的网站没有)
装载时冻结)
工作代码现在如下所示:
$.ajax({
url: "ajax_actions.php",
type: "GET",
data: { action: "search_category_add", title: $("#category_title").val() },
dataType: "json",
async: false,
success: function(result)
{
// console.log("Category already exists: "+result.category_found);
if(result.category_found == 1)
{
// console.log("Category already exists: Inside if");
$('#msg_search_category').removeAttr('style');
validationErrors++;
}
}
});
if(validationErrors > 0) { return false; }
console.log(html)
显示了什么?您是否验证了服务器端脚本是否正常工作?如果您在成功
函数中执行console.log(html.toSource())
,您会得到什么?@MarcBconsole.log(html)
显示[对象]
服务器端脚本没有错误。您在哪里处理表单提交事件可能是表单中有一个提交按钮,提交事件没有错误返回,并且您可能已将单击处理程序附加到此函数。这个函数绑定到什么?按钮?任何形式的活动?发布表单代码。console.log(html)
显示了什么?您是否验证了服务器端脚本是否正常工作?如果您在成功
函数中执行console.log(html.toSource())
,您会得到什么?@MarcBconsole.log(html)
显示[对象]
服务器端脚本没有错误。您在哪里处理表单提交事件可能是表单中有一个提交按钮,提交事件没有错误返回,并且您可能已将单击处理程序附加到此函数。这个函数绑定到什么?按钮?任何形式的活动?张贴您的表单代码。