在表单提交之前，先做jquery检查Codeigniniter验证
表单提交按钮，我必须检查一些使用jQuery的验证。不过，我也使用form_open（xxxx）进行codeiginiter验证，这使得我的提交按钮jQuery没有被调用。我该如何做这两件作品？之前还是之后？ （我想前和后端检查）在表单提交之前，先做jquery检查Codeigniniter验证
<?php $prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p); ?>
<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8">
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
<button id="validate" hidden="true" type="submit"></button>
</div>
</div>
function setup()
{ .......Checking some fields in the form...............}
我要的是： 表单提交，jQuery的/ JS检查（前端），然后后端笨形式的检查。
（好像当用户点击提交按钮，它忽略了所有的jQuery验证，直接进入笨验证。我想如果我在PHP中使用form_open（）我是非常有限的吧？）
我我正在关注这个link。
希望找到一个答案，以便其他人将知道正确的方式与codeiginiter验证。
感谢您所有的答案，但我仍然找不到合适的解决方案。 :(任何人都请帮助？
如果你想提交表单之前在客户端验证，下面的工作：
// view
echo form_open('basic_controller/submission');
echo form_input(array('name'=>'text', 'id'=>'text_input'));
echo form_submit('my_submit', 'Enter', "id='my_submit'");
echo form_close();
// controller
function submission() {
$field = $this->input->post('text');
// add your checkings (backend)
}
到目前为止，这是你已经有了，但更简单。 请注意，窗体上的字段有一个ID。我们现在可以通过jQuery轻松操作和访问表单的内容。添加点击处理程序提交按钮：
// view
<script type='text/javascript'>
$(document).on('click', '#my_submit', function() {
var input_value = $('#text_input').val();
// do your frontend checkings here
alert('before form submission. ' + input_value);
});
</script>
其实，有没有必要给领域中的一个ID，你只需要一个ID分配给提交按钮，然后访问其他方式的领域（我只是为了简单起见）。
编辑
在你的情况，脚本应该是：
$(document).on('click', '#submit-upload-form', function() {
setup();
});
仍然没有触发jquery检查。 –
@RyanFung我已经澄清了你应该怎么做你的情况。请看看编辑 – Dacklf
它似乎是你试图使用点击处理程序来防止表单提交。无论您在点击功能（操作处理程序）中放置什么，提交仍然会通过。 –
你需要你的脚本之前关闭窗体，这将正常工作。请尝试以下代码 -
<?php $prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p); ?>
<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8">
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
<button id="validate" hidden="true" type="submit"></button>
</div>
</div>
</form>
<script>
function setup()
{ .......Checking some fields in the form...............}
</script>
只是相同的代码。是否有任何代码更新并发布？ –
@WingHingRaymondChiu代码与ryan发布的代码不同。仔细看看。和标签是额外的，有所作为。 –
@ShoaibAkhter我仍然没有得到如何停止jQuery验证表单提交之前的代码验证。 –
这里例尝试与one..hope为你工作。 。
<?php
$attributes = array('class' => 'email', 'id' => 'myform');
$prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p,$attributes); ?>
<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8">
<button id="submit-upload-form" class="btn btn-primary btn-tw" type="submit"><i class="glyphicon glyphicon-upload"></i>Submit</button>
</div>
</div>
<script>
$(document).ready(function(){
$('#myform').submit(function() {
alert('hi');
//write your validation code here. and make sure about jquery library is loaded.
return false;
});
}};
</script>
我试图阻止表单提交，但没有运气使用这种方式。 –
您可以删除您的提交按钮，你把验证功能上的一个按钮像你这样的
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
而你的设置功能检查像第是：
function setup(){
//do your verification stuff
if (valid){
$("#yourFormId").submit();
}
}
对于有由乔恩Zaefferer，jQuery开发团队中的一员，在jQuery UI的团队和QUnit的维护者主要开发人员编写和维护的一个插件。它是在2006年jQuery早期开始的，从那时起更新和改进。
捆绑了很多例子，你可以用
把这样的事情在你的头打，
<script src="<?php echo YOUT_PATH.'jquery-1.12.2.js'; ?>"></script>
<script src="<?php echo YOUR_PATH.'bootstrap.min.js'; ?>"></script>
<script src="<?php echo YOUT_PATH.'jquery-validation-1.15.0/dist/jquery.validate.js'; ?>"></script>
在您的形式，将与此类似
<?php echo form_open('form/'.$usr.'/'.$name.'?prevURL='.urlencode($p), array('class'=>'form-horizontal','class'=>'signupForm')); ?>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-4">
<label class="col-md-3 control-label text-center"></label>
<button type="submit" class="btn btn-primary btn-tw" name="signup" ><i class="glyphicon glyphicon-upload"></i>Submit</button>
</div>
</div>
<?php form_close(); ?>
和在你的页脚放置类似于这个。
<script type="text/javascript">
$("#signupForm").validate({
rules: {
// Rules Here
},
messages: {
// Messages here
},
errorElement: "em",
errorPlacement: function (error, element) {
// Add the `help-block` class to the error element
error.addClass("help-block");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label"));
} else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
}
});
</script>
您可以了解如何将在这个环节被正确使用， http://jqueryvalidation.org/
它可以和codeigniter form validtion？ –
它不需要工作，js是一个不同级别的验证。这里唯一需要关注的是css类 - 它们应该在应用程序中保持一致，并且您可能应该坚持一种显示错误的方式（全部在一个地方或每个输入一个） – cssBlaster21895
是的，我已经尝试过 – Fil
您可以jquery.validate plugin坚持。它的约定类似于html5 methods来验证表单。每个现代浏览器都支持这种方法，所以也许你甚至可以省略jquery插件，并且如果有人关闭javascript，那么依赖代码验证作为最后的手段。
有了jquery插件，你有更多的自定义，而html5验证带来了自己的消息和样式。
我认为你的例子也有问题，没有输入，所以我们确切地验证。提供上传课程表示会有文件上传的发生。
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" required/>
另外jquery插件有方法upload validation。
您的表单可能存在一些问题。你关了吗？它有神秘的行动的事情。也许它应该是form_open_multipart（）如果有任何文件，请记住form_open生成POST方法的形式。那么这个url内部动作怎么样：form /'.$ usr。'/'。$ name。'？prevURL ='。$ p。也许尝试改进控制器和路由。
顺便说一句。使用jQuery验证就像在输入中添加html5规则并在底部添加脚本一样简单。
<script>
$("#your_form").validate();
</script>
而最后一件事。如果您使用jquery插件，请记住加载插件之前加载jquery :)
在您的jquery函数中添加'event.preventDefault（）' – Vinie
您可以绑定任何函数以单击按钮。这个按钮是否为提交并不重要，绑定不会阻止提交发生。我已经测试了我的答案，它的工作原理是：首先触发jQuery函数，然后触发表单验证。 – Dacklf