在提交表单时，在 Codeigniter 验证之前先进行 jquery 检查

Question

表单提交按钮，我必须使用 jquery 检查一些验证。但是我也使用了带有 form_open(xxxx) 的 codeiginiter 验证，这使得我的提交按钮 jQuery 没有被调用。我该怎么做才能使这两项工作？之前还是之后？ （我要前后端检查）

<?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 检查（前端），然后是后端 codeigniter 表单检查。

（似乎当用户单击提交按钮时，它会忽略所有 jquery 验证并直接进入 codeigniter 验证。我想如果我在 php 中使用 form_open() 我会非常有限，对吧？）

我正在关注这个link。

希望找到答案，以便其他人知道使用 codeiginiter 验证的正确方法。

感谢您迄今为止的所有回答，但我仍然找不到正确的解决方案。 :( 其他人请帮忙？

Answer 1

如果您想在提交表单之前在客户端中进行验证，则可以使用以下方法：

// 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();
});

Answer 2

您可以坚持使用jquery.validate plugin。它的约定类似于html5 methods 来验证表单。每个现代浏览器都支持这种方法，所以也许你甚至可以省略 jquery 插件，并在有人关闭 javascript 时依赖 codeigniter 验证作为最后的手段。

使用 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 validate 就像将 html5 规则放入输入中并在底部添加脚本一样简单。

<script>
$("#your_form").validate();
</script>

最后一件事。如果您使用 jquery 插件，请记住在加载插件之前加载 jquery :)

Answer 3

这里是一个例子，试试那个..希望对你有用..

<?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>

Answer 4

为此，Jörn 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/

Answer 5

我在下面的代码中遇到了同样的问题。

<form id="formId" action="path">HTML</form>
<script>
$("#formId").submit(function(){
  //validation
  return false;
});
<script>

但是当我交换 id 和 action 时，它就可以正常工作了。

<form  action="path" id="formId"></form>

Answer 6

您需要在编写脚本之前关闭表单，这将起作用。试试下面的代码-

<?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>

Answer 7

你可以删除你的提交按钮，然后像你为按钮做的那样在按钮上放置一个验证功能

<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();
  }

}