Javascript 带Codeigniter表单验证的引导模式
在我的带有codeigniter的引导模型表单上,如果输入的用户名不正确,它将显示消息。 但当我点击按钮时,即使显示验证错误,引导模式也会消失 目标:我希望能够做到的是,如果任何表单验证为真,则不会关闭引导模式,但如果表单验证正常,则让我提交 如果表单验证出错,如何防止引导模式关闭 我试过使用Javascript 带Codeigniter表单验证的引导模式,javascript,jquery,codeigniter,Javascript,Jquery,Codeigniter,在我的带有codeigniter的引导模型表单上,如果输入的用户名不正确,它将显示消息。 但当我点击按钮时,即使显示验证错误,引导模式也会消失 目标:我希望能够做到的是,如果任何表单验证为真,则不会关闭引导模式,但如果表单验证正常,则让我提交 如果表单验证出错,如何防止引导模式关闭 我试过使用e.preventDefault()不走运 模型视图 <?php if ($users) { ?> <?php foreach ($users as $user) { ?> <
e.preventDefault()代码>不走运
模型视图
<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>
<div class="modal fade" id="myModal-<?php echo $user['username']; ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header clearfix">
<div class="pull-left">
<h2 style="font-size: 18px;">Are you absolutely sure?</h2></div>
<div class="pull-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
</div>
<div class="modal-body">
<div class="alert alert-warning text-center">
Unexpected bad things will happen if you don't read this!
</div>
<p class="text-center">If you delete this user, this user will not be able to login to the admin,
and all of his or her user information will be <b>Removed For Ever!</b>
</p>
<br/>
<p>Please type in the username of the user to confirm. <?php echo validation_errors('<div class="text-danger validation">', '</div>'); ?></p>
<form role="form" action="<?php echo $action;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="text" id="input-user-<?php echo $user['username']; ?>" name="username" value="" class="form-control" />
<input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>" class="form-control" />
</div>
<div class="form-group text-center">
<button type="submit" id="button-delete-user-<?php echo $user['username']; ?>" class="btn btn-user-delete"><span class="text-danger">I understand the consequences, deleting this user</span></button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap Model Form Validation Check -->
<script type="text/javascript">
$(document).ready(function(){
$('#button-delete-user-<?php echo $user['username']; ?>').on('click', function(e) {
e.preventDefault();
});
});
</script>
<!-- Enabled Submit Button If Text Is Entered In Input -->
<script>
$(document).ready(function(){
$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled',true);
$('#input-user-<?php echo $user['username']; ?>').keyup(function(){
if($(this).val().length !=0)
$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', false);
else
$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled',true);
});
});
</script>
<?php }?>
<?php }?>
错误验证
是CI提供的一项功能
提交页面时,只能使用code igniter的错误验证,因此,由于页面正在提交,引导模式将自动关闭
如果您想在模式上执行表单验证,最好使用AJAX
如果要在打开的表单上方显示错误消息,
只需创建一个空白div,如:
<div class='error_msg'>
</div>
“验证”后缺少一个结束括号css声明:bootstrap模式仍然会消失,尽管已经修复。您有示例吗,因为我希望表单上的表单验证消息仍然显示在表单打开的正上方。我添加了我的控制器删除函数数据中的内容:在ajax中?只需将字段信息作为json传递,并在php文件中验证它。我还有在包含表单的模式中显示错误时也会出现同样的问题。
<div class='error_msg'>
</div>
$(function(){
$('#form_id').submit(function(event){
event.preventDefault();
var custemail = $('#email_id').val();
var custname = $('#name').val();
$.ajax({
type: 'POST',
url: your controller path,
data: {
'name': custname,
'email': custemail
},
dataType: 'html',
success: function(results){
if(something not as you expected){
$('.error_msg').html('error msg');
return false;
}
}
});
});
});