[英]Form validation not working before submit with ajax method
I creating submit form with ajax but, i cant validate form before submit.. 我用ajax创建提交表单但是,我无法在提交之前验证表单。
iam using codeigniter 3 with jquery validate 我使用codeigniter 3和jquery验证
my code working, but i need set form like min lenghth, email format etc 我的代码工作,但我需要设置形式像min lenghth,电子邮件格式等
this my code before (with input class="required") 这是我之前的代码(输入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!");
}
});
});
});
i trying to modified that code to this, but code its not working 我试图修改该代码,但代码不起作用
$(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!");
}
});
});
});
my form like this 我的表格是这样的
<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>
i expect, i can validate that form before submit 我希望,我可以在提交之前验证该表格
You are using jquery validate in an incorrect manner. 您正在以不正确的方式使用jquery验证。
For starters you don't nest validate in a click event, and then you don't run your submit code independently. 对于初学者,您不会在单击事件中嵌套验证,然后您不会独立运行提交代码。 Instead you run it in the submit callback of validate. 而是在validate的submit回调中运行它。
A sample looks like this: 示例如下所示:
$("#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);
}
});
},
});
also I would remove $('#article-form').ajaxSubmit();
我也会删除$('#article-form').ajaxSubmit();
from this onClick="CKupdate();$('#article-form').ajaxSubmit();"
从这个onClick="CKupdate();$('#article-form').ajaxSubmit();"
. 。 It holds no reference to current code, and it won't work with validate. 它没有引用当前代码,也不能用于验证。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.