Question

我有一张桌子。该表包括三个用户输入。数量，行项目和价格。在用户提交表单之前，我需要填写所有三个。该表允许添加行。

这是我的桌子。

<form id="add_quote_form" name="add_quote_form" class="form-horizontal">
   <table style="width: 90%" id="myTable" class="centered-table table table-bordered">
   <thead>
    <tr>
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Action</th>
     </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width: 60%"><input type="text" name="detail[]"required></td>
        <td style="width: 10%"><input type="number" name="qty[]" required></td>
        <td style="width: 15%"><input type="number" name="price[]" required></td>
        <td style="width: 12%"><div class="inline"><input type="button" id="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" id="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
       </tr>
    </tbody>
   </table>
   <input type="button" id="saveBtn" name="saveBtn" class="btn btn-primary" value="Create Order" onClick="this.disabled=true; add_quotation();return false;">
</form>

向表中添加行的功能

$(function(){
    $("#addButton").click(function(){
        $(this).closest("tr").clone(true).appendTo("#myTable");
    });

    $("#deleteButton").click(function(){
//      var x = document.getElementById("myTable").rows.length;
        var x = $('#myTable tr').length;
        if(x == 2){

        } else {
             $(this).closest("tr").remove();
        }

    });
});

在提交按钮上调用的函数

function add_quotation() { 
document.add_quote_form.saveBtn.value="Saving...";
var formArray = $('#add_quote_form').serialize();

jQuery.post('<?php echo base_url(); ?>index.php/quotes/add_work_order_validation/' , formArray, function(data)
{
    //alert('here');

    if (data.success)
    {
        //GetQuotesPage();
        //location.reload(base_url+'quotes');   
        //window.location = base_url+'quotes';
        document.add_quote_form.saveBtn.value="Save Order";
        document.add_quote_form.saveBtn.disabled=false;
        swal({


    title: "Order Saved!",
               // text: "You clicked the button!",
                type: "success"
            });
            //alert("Quote Saved");
        }
        else
        {
            document.add_quote_form.saveBtn.value="Save Order";
            document.add_quote_form.saveBtn.disabled=false;
            for (var i in data.errors)
            {
                $('#'+i).css('border-color', 'red');
                $('#'+i).validationEngine('showPrompt', data.errors[i], '', 'topRight', true);
            }
            for (var z in data.hidden)
            {
                $('#add_quote_form#' +data.hidden[z]).validationEngine('hide');
            }
    }
}, 'json');

return false;
}

这是我的控制器

public function add_work_order_validation()
 { 


    $this->form_validation->set_rules('quoteName', 'Quote Name', 'trim|required');
    $this->form_validation->set_rules("dueDate", "Due Date", "trim|required");
    $this->form_validation->set_rules('detail[]', 'Line Items','required|trim|callback_matchLineItems');


    if ($this->form_validation->run() == FALSE) 
    {
        $result['errors'] = array();
        $result['hidden'] = array();
        $result['success'] = false;
        $fields = array('quoteName', "dueDate", "detail");

        foreach ($fields as $field)
        {
            if (form_error($field)) 
            {
                $result['errors'][$field] = strip_tags(form_error($field));
            }
            else
            {
                $result['hidden'][] = $field;
            }
        }
    }
    else
    { //Post Form 
}

最后一部分是我的回调函数

function matchLineItems() {

    $detailArray = $this->input->post("detail");
    $qtyArrayPost = $this->input->post("qty");
    $priceArray = $this->input->post("price");
    $qtyNumberCount = count($qtyArrayPost);
    $priceNumberCount = count($priceArray);
    $detailNumberCount = count($detailArray);

    if($qtyNumberCount != $priceNumberCount || $qtyNumberCount != $detailNumberCount || $detailNumberCount != $priceNumberCount) {
        $this->form_validation->set_message('matchLineItems', 'No Fields Can Be Left Blank');
        return FALSE;
    } else {
        return TRUE;
    }

 }

我遇到的问题是当我将订单项字段留空时，表单未提交但未显示错误。如果我在行项目字段中输入数据但将数量和价格字段留空，则表单提交。我是否需要为表格中的每个字段创建验证？如何显示错误？

Codeigniter 版本3.0.6

Answer 1

首先，您在表单中使用了不完整的输入选择器。它应该是这样的..

 <input type="text" name="detail[]" required>

在codeigniter代码中。从表单中对已发布的数组使用简单的php isset和count函数。通过这个，您可以验证发布的数组。表单验证库可以根据需要随时随地工作。发布数据的条件。

    if(isset($_POST['detail']) && (count($_POST['detail'])>0)){
    // code here
    }
    else{
     return "required";
    }

Answer 2

在尽我所能了解之后，我就可以说了。

首先，您的所有输入都没有关闭＆gt;并且要求不需要那个＆＃34;＆＃34;部分。

<input type="text" name="detail[]" required=""

将所有内容更改为

<input type="text" name="detail[]" required>

接下来，您在codeigniter中的回调，我假设代码是检查是否所有输入。你不需要这就是你做我上面所说的。

最后，当您动态添加输入时，我错过了该部分，添加了该代码，我将更多地查看它。但按照我的说法，您将无法使用HTML5验证提交表单。

如果其中任何一个为空，则不会刷新页面或提交表单

Answer 3

对于像

这样的字段

<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Guest's First Name">

添加一个简单的标签，如下面的

<p class="firstname_error error"></p>

然后使用jquery检查

var firstname = $('#firstname').val(); 
if(firstname == '' || firstname == null)
            {
                valid = false;
                $(".firstname_error").html("* Firstname is required");
            }
            else
            {
                $(".firstname_error").html(""); 
            }

并使用条件

添加主要部分

if(valid==true){

//your main jquery code
}

此外，如果您使用CI方法进行表单验证，则必须指定类似

的位置

<?php echo form_error('username'); ?>
<input type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" />

在此提及其教程https://www.codeigniter.com/userguide3/libraries/form_validation.html#showing-errors-individually

由于测试细节有限这是代码https://jsfiddle.net/kmvgty/napz948b/1/

的解决方法

刚为每个标签添加了一个id，并且有像

这样的js

$('#saveBtn').on('click', function() {
  var detail = $('#detail').val();
  var qty = $('#qty').val();
  var price = $('#price').val();
  if ((detail == '') || (detail == null)) {
    valid = false;
    $('#erropr').removeClass('hide');
    $('#erropr').html('* Enter an item');

  } else {
    $('#erropr').html('');
  }

  // same way for other
});

当然你的情况会有所不同，但这只是一个小提琴的建议，如果它可以帮助你

Answer 4

我找到了一个简单的方法，

一些简单的javascript

我倾向于在控制器中使用我的验证而不使用form_validation（）方法

示例是：

    //this is a model
    public function login($username,$password){
    $data = array('username' => $username,
    'password' => $password);

    $query = $this->db->select('user_account',$data);

    return $query->result_array();
    }

    //view
    <form action = "" method = "post">
    <input type = "text" name = "username"/>
    <input type = "password" name = "password"/>
    <button>Submit</button>
    </form>


    //this is the controller
    public function logging_in(){
    $username = $this->input->post('username');
    $password = $this->input->post('password');

    $result = $this->model->login($username,$password);

            if(empty($username) && empty($password)){

            echo "<script>alert('Empty!');</script>";
            }
            else{
                    if($result!=NULL){
                    echo "<script>alert('Successfully Logged In!');</script>";
                    }
            }

    }

您可以通过以下方式在控制器中调用该方法：

    <?php echo form_open('User_Authentication/logging_in'); ?>
    //Your form
    <?php echo form_close(); ?>

或者你可以使用它：

    <form action = "<?php echo base_url(); ?>index.php/User_Authentication/logging_in" method="post">

试试这个。

Answer 5

$this->load->library('form_validation');
$this->form_validation->set_error_delimiters('<div class="error">', '</div>'); 
$this>form_validation>set_rules('detail','Detail','required|greater_than[0]');
if ($this->form_validation->run() == FALSE) {
   $this->load->view('',$data);
}else{
   $this->model->add()
}

Codeigniter验证表单中的数组

5 个答案: