Question

表单提交按钮，我必须使用jquery检查一些验证。但是我也使用了formiginiter验证和form_open（xxxx），这使我的提交按钮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

这是一个尝试的例子..希望为你工作..

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

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

// 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 4

为此，由JQuery团队的成员JörnZaefferer编写和维护插件，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和操作时，它确实起作用了。

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

}

在Form Submission上，在Codeiginiter验证之前先进行jquery检查

7 个答案: