堆棧內存溢出
  簡體   English   中英

使用 AJAX 在 CodeIgniter 中進行表單驗證

[英]Form validation in CodeIgniter using AJAX

 原文  2017-09-28 11:38:21  6   3    javascript/ php/ jquery/ ajax/ codeigniter

問題描述

我有一個表格，字段是全Fullname, Password and Mobile no ，每個字段都有一個按鈕。 所有字段在頁面中都顯示為單個。 如果用戶單擊按鈕，則將顯示下一個字段，但我必須使用 AJAX 對其設置驗證。 我必須在每個字段上顯示錯誤單。 你會幫我嗎？

我嘗試了下面的代碼，但我在警報中得到了錯誤的輸出。

我的控制器

public function submit_from(){
        $this->load->library('form_validation');
        $this->load->helper('form');
        $this->form_validation->set_error_delimiters('', '');
      $this->form_validation->set_rules('fullname', 'fullname', 'required|min_length[5]|max_length[20]|trim|xss_clean');
      $this->form_validation->set_rules('password', 'password', 'required|min_length[5]|max_length[20]|trim|xss_clean');
      $this->form_validation->set_rules('mobile', 'mobile', 'required|min_length[5]|max_length[20]|trim|xss_clean');

        if ($this->form_validation->run() == FALSE)
        {
         echo validation_errors();
        }
        else
        {
        echo "true";

        }
}

看法

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <style type="text/css">
    #password_form, #mobile_form{
      display: none;
    }
  </style>
</head>
<body>

<form class="active_form" name="form_1" method="post">
    <div id="name_form">
   <!--Name form********************************************************-->
      <label>Full name</label>
      <input type="text" name="fullname" id="fullname" placeholder="Full name">
      <?php echo form_error('fullname'); ?>
      <button type="button" id="continue_to_password">Continue to Password</button>
   </div>
   <!--password form********************************************************-->
   <div id="password_form">
      <label>Password</label>
      <input type="password" name="password" id="password" placeholder="password name">
      <?php echo form_error('password'); ?>
      <button type="button" id="continue_to_mobile">Continue to mobile no</button>

   </div>
   <!--mobile form********************************************************-->
   <div id="mobile_form">
      <label>Mobile number</label>
      <input type="text" name="mobile" id="mobile" placeholder="mobile no">
      <?php echo form_error('mobile'); ?>
      <button type="submit">Submit</button>
   </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

$(function () {
$('form[name="form_1"]').on('submit', function (e) {
e.preventDefault();
        $.ajax({
            type: 'post',
            url: '<?php echo base_url("index.php/testcontroller/submit_from"); ?>',
           data: $('form[name="form_1"]').serialize(),
            success: function (data) {
                alert(data);
            }
        });
    });
});

/*When clicked on button*/
$('body').on('click', '#continue_to_password', function(e) {
  $('#name_form').hide();
  $('#password_form').show();
});
$('#continue_to_mobile').on('click', function() {

  $('#password_form').hide();

  $('#mobile_form').show();
});
</script>
</body>
</html>

我嘗試使用 Jquery 進行客戶端驗證，但是當我單擊提交按鈕時，這在最后也有效。

查詢

$(document).ready(function() {
    $(".active_form").validate({
        rules: {
            fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }

        },
    })

    $('#continue_to_password').click(function() {
        $(".active_form").valid();
    });
});

3 個解決方案

解決方案1
 0  2017-09-28 12:02:47

您可能會看到驗證結果：

if ($this->form_validation->run() == FALSE) {
    echo validation_errors();
}

請參閱這篇文章，它可能對您有所幫助... 在 codeigniter 中使用 jquery ajax 進行表單驗證

解決方案2
 0  2017-09-28 15:05:29

要使用帶有 ajax 提交的 jQuery 進行驗證，您可以嘗試使用此腳本。

jQuery(function($){

        $(".active_form").validate({
          rules: {
              fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }
          },
          submitHandler: function (form) {

                var request;
                // bind to the submit event of our form

                // let's select and cache all the fields
                var $inputs = $(".active_form").find("input, select, button, textarea");
                // serialize the data in the form
                var serializedData = $(".active_form").serialize();

                //alert(serializedData);

                // let's disable the inputs for the duration of the ajax request
                $inputs.prop("disabled", true);

                request = $.ajax({
                        url: "http://ajax/function/url/here",
                        type: "POST",
                        data: serializedData,
                });

                // callback handler that will be called on success

                request.done(function(data) {

                        // log a message to the console
                        alert("success awesome");

                });
                request.fail(function (jqXHR, textStatus, errorThrown) {
                        // log the error to the console

                });
                request.always(function () {
                        // reenable the inputs
                        $inputs.prop("disabled", false);
                });
            }
      });

    });

解決方案3
 0 已采納  2017-09-29 14:55:21

最后，我找到了我的解決方案。 我不知道這是正確的做法，但它解決了我的問題。

$(document).ready(function() {
    $("form[name='form_1']").validate({
        rules: {
            fullname: {
                required: true,
                 minlength:3,
                maxlength:50
            },

            password: {
                required: true,
                 minlength:3,
                maxlength:50
            },
            mobile: {
                required: true,
                 minlength:3,
                maxlength:50
            }

        },
    })

   $('body').on('click', '#continue_to_password', function(e) {
        if($("form[name='form_1']").valid())
        {
            $('#name_form').hide();
            $('#password_form').show(); 
        }
    });

   $('#continue_to_mobile').on('click', function() {
     if($("form[name='form_1']").valid()){
          $('#password_form').hide();
          $('#mobile_form').show();
            }
});

});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Codeigniter Ajax表單驗證錯誤 codeigniter ajax 表單驗證與提交 ajax 表單提交上 Codeigniter 中的表單驗證 使用AJAX進行表單驗證 在 codeigniter 中使用 javascript 進行表單驗證 如何使用Ajax在Codeigniter中使用form_validation驗證表單數據 如何使用jQuery AJAX集成Codeigniter表單驗證庫和表單中的文件上傳？ 使用ajax在codeigniter中提交表單 在Codeigniter中使用Ajax提交表單 如何使用Codeigniter和Ajax通過文件上載路徑和驗證插入多份職業形式的數據
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM