在表单提交中，在Codeigiiter验证之前先进行jquery检查 - On Form Submission, do jquery checking first before Codeiginiter validation

表单提交按钮，我必须使用jquery检查一些验证。然而，我也使用了form_open（xxxx）的codeigiiter验证，这使得我的提交按钮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检查（前端），然后是后端代码点火器表单检查。

（当用户点击提交按钮时，它似乎忽略了所有的jquery验证，直接进入代码点火器验证。我认为如果我在php中使用form_open（），我会受到很大的限制，对吧？）

我正在关注此链接。

希望找到一个答案，让其他人知道正确的方法来进行代码初始化验证。

感谢您到目前为止的所有回答，但我仍然找不到正确的解决方案（还有人可以帮忙吗？

如果您想在提交表单之前在客户端进行验证，以下操作将起作用：

// 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.validate插件。它的约定类似于验证表单的html5方法。每个现代浏览器都支持这种方法，所以如果有人关闭javascript，你甚至可以提交jquery插件，并将代码点火器验证作为最后手段。

有了jquery插件，您可以进行更多的自定义，而html5验证带来了自己的消息和样式。

我认为你的例子也有问题，没有输入，所以我们确切地验证了什么。给定上传类表明将发生文件上传。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" required/>

jquery插件也有上传验证的方法。

你的表格可能有问题。你关闭它吗？而且它有错误的动作。如果有文件的话，也许应该是form_open_multipart（），记住form_open产生POST方法表单。那么这个操作中的url呢：form/'$usr.'/'$name。'？prevURL='$p也许可以尝试改进控制器和路由。

对了。使用jquery-validate就像在输入中放入html5规则并在底部添加脚本一样简单。

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

还有最后一件事。如果您使用jquery插件，请记住在加载插件之前加载jquery：）

这里有一个例子。。希望对你有用。。

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

为此，jQuery团队成员、jQuery UI团队的首席开发人员和QUnit的维护人员Jörn Zaeffer编写并维护了一个插件。它始于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/

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

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

但当我交换id和action时，它很简单。

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

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

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

您可以删除提交按钮，并在按钮上设置验证功能，就像对所做的那样

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