Form validation in CodeIgniter using AJAX

Question

I have one form and fields are Fullname, Password and Mobile no and each field has the single button. All the fields are displaying single in the page. If the user clicked on the button then next field will display but I have to set the validation on it using AJAX. I have to display the error single on each field. Would you help me in this?

I tried below code but I am getting false output in the alert.

My controller

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";

        }
}

View

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

I tried client side validation using Jquery but this is also working at the end when I clicked on submit button.

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

You haven't split up the validation process yet. What have you tried so far to solve this on your own? Also, given that right now, all the server does is perform a length check, why not do this client-side instead? — user5734311
– user5734311, Commented Sep 28, 2017 at 11:42
@ChrisG, I tried client side but this is also working at the end when I clicked on submit button — Naren Verma
– Naren Verma, Commented Sep 28, 2017 at 13:01

Tom · Accepted Answer · 2017-09-28 12:02:47Z

0

You may see the result of your validation:

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

Please see this post it may help you... Do form validation with jquery ajax in codeigniter

answered Sep 28, 2017 at 12:02

Tom

541 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Naren Verma Over a year ago

Yes, Mr.Tom, now I am getting an error in the alert but How can I display one by one? Because each field have there button

Naren Verma Over a year ago

And the error is display after clicked on submit button at the end.

Harish · Accepted Answer · 2017-09-28 15:05:29Z

For validation using jQuery with ajax submit you can try this script.

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

    });

Naren Verma · Accepted Answer · 2017-09-29 14:55:21Z

Finally, I found My solution. I don't know it's the correct way to do but it's solved my issue.

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

});

Collectives™ on Stack Overflow

Form validation in CodeIgniter using AJAX

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related