表单验证在使用 ajax 方法提交之前不起作用
Posted
技术标签:
【中文标题】表单验证在使用 ajax 方法提交之前不起作用【英文标题】:Form validation not working before submit with ajax method 【发布时间】:2019-10-30 20:17:06 【问题描述】:我使用 ajax 创建提交表单,但是在提交之前我无法验证表单..
我在 jquery validate 中使用 codeigniter 3
我的代码可以工作,但我需要设置最小长度、电子邮件格式等格式
这是我之前的代码(输入 class="required")
$(document).ready(function()
$(".save_post").click(function()
if ($("#post_val").valid())
$("#post_val").submit();
else
return false;
var data = $('.post_form').serialize();
$.ajax(
type: 'POST',
url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
data: data,
success: function(data)
alert("Post Success!");
);
);
);
我试图将代码修改为这个,但代码不起作用
$(document).ready(function()
$(".save_post").click(function()
$('#post_val').validate(
rules:
title:
required: true,
minlength: 10
,
image:
required: true,
minlength: 5
,
messages:
title:
required: 'title error',
minlength: 'kurang dari 10'
,
image:
required: true,
minlength: 5
);
var data = $('.post_form').serialize();
$.ajax(
type: 'POST',
url: "<?= base_url() ?>admin_ajx/post_ajx/update_post",
data: data,
success: function(data)
alert("Post Success!");
);
);
);
我的表格是这样的
<form action="<?= base_url() ?>admin/add-post" method="POST" role="form" class="post_form" id="post_val">
<input type="text" name="title" class="form-control" placeholder="Title" id="post_title" onkeyup="auto_alias();">
<input class="form-control input-sm required" type="text" name="image" id="img_url" readonly="readonly" onclick="openKCFinder(this)" style="cursor:pointer" />
<a class="btn btn-sm btn-info save_post" onClick="CKupdate();$('#article-form').ajaxSubmit();">POST</a>
</form>
我希望,我可以在提交之前验证该表单
【问题讨论】:
【参考方案1】:您以不正确的方式使用 jquery validate。
对于初学者,您不会在单击事件中嵌套验证,然后您就不会独立运行提交代码。相反,您在 validate 的提交回调中运行它。
示例如下所示:
$("#ajax-contact-form").validate(
errorClass: "text-danger",
rules:
name:
required: true,
,
phone:
required: false,
digits: true,
minlength: 7,
,
email:
required: true,
email: true,
,
message:
required: true,
minlength: 10,
,
,
submitHandler: function (form, e)
e.preventDefault(); // important to prevent issues!!!
$("#contact-button").html('Sending...');
var str = $(form).serialize(); // to get your serialized form
$.ajax(
type: "POST",
url: base_path + "/contact/send",
data: str,
dataType: 'json',
success: function (data)
var result = '';
if (data.status === 'success')
$(form).trigger('reset');
result = '<div class="alert alert-success"><i class="fa fa-check"></i> ' + data.msg + '</div>';
else
result = '<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + data.msg + '</div>';
$("#contact-button").html('Send Message');
$('#note').html(result);
setTimeout(function ()
$("#note").fadeOut();
, 8000);
);
,
);
我也会从这个onClick="CKupdate();$('#article-form').ajaxSubmit();"
中删除$('#article-form').ajaxSubmit();
。它不包含对当前代码的引用,并且不能与 validate 一起使用。
【讨论】:
提交表单引用***.com/questions/3256510/… 我会尝试改变我的 ajax 方法以上是关于表单验证在使用 ajax 方法提交之前不起作用的主要内容,如果未能解决你的问题,请参考以下文章