If you don't know how to check the form data using the Codeigniter form verification library with Ajax and get the response in JSON data type. In this publication you will find a form check in Codeignter with Ajax jQuery and JSON. To get to know the Codeigniter form validation library with Ajax, here we create the Ajax Codeigniter contact form to learn this topic.
We have already learned a lot from Codeigniter with Ajax. In this post we shared an interesting topic about codeigniter with Ajax. For information on creating Ajax-jQuery form validation, see Codeigniter. Using the Codeigniter forms validation library with Ajax, we get a success or error message in JSON format.
Every programmer knows that validation is a very important part of a web-based application or software process. Since you can find forms such as registration form, registration form, contact form, comment form etc. in every web application, we would like to validate the form data if we have not validated the form data. It is very dangerous for our web application. If you used the Codeigniter framework for your web-based application, Codeigniter has an extensive form validation library for validating form data that is used to configure server-side validation. However, server-side form data validation has an update page for each form submission. To prevent the form from being updated, we need to use Ajax with the Codeigniter form validation library. An Ajax request was made to the Codeigniter method, which uses the form validation library to perform validation rules on the form data. If a validation error occurs, you use the form_error () method to get the validation error, store it in an array, and send it back to the Ajax request in JSON format.
Therefore, the process of submitting the form is carried out without updating the website. It also tells you how to use Ajax to submit forms in Codeigniter without updating the website. To learn this topic here, we create a contact form with a field such as name, email address, subject and message. This contact form data is sent to the code signiter method using Ajax. In the Codeigiter method, you carry out various validation rules, e.g. B. Required field validation and email format validation using the Codeigiter Form Validation Library. And after the validation rules are successful, send a response to Ajax in JSON format. Below is the complete source code for validating the Ajax Codeigniter form.
We have already learned a lot from Codeigniter with Ajax. In this post we shared an interesting topic about codeigniter with Ajax. For information on creating Ajax-jQuery form validation, see Codeigniter. Using the Codeigniter forms validation library with Ajax, we get a success or error message in JSON format.
Every programmer knows that validation is a very important part of a web-based application or software process. Since you can find forms such as registration form, registration form, contact form, comment form etc. in every web application, we would like to validate the form data if we have not validated the form data. It is very dangerous for our web application. If you used the Codeigniter framework for your web-based application, Codeigniter has an extensive form validation library for validating form data that is used to configure server-side validation. However, server-side form data validation has an update page for each form submission. To prevent the form from being updated, we need to use Ajax with the Codeigniter form validation library. An Ajax request was made to the Codeigniter method, which uses the form validation library to perform validation rules on the form data. If a validation error occurs, you use the form_error () method to get the validation error, store it in an array, and send it back to the Ajax request in JSON format.
Therefore, the process of submitting the form is carried out without updating the website. It also tells you how to use Ajax to submit forms in Codeigniter without updating the website. To learn this topic here, we create a contact form with a field such as name, email address, subject and message. This contact form data is sent to the code signiter method using Ajax. In the Codeigiter method, you carry out various validation rules, e.g. B. Required field validation and email format validation using the Codeigiter Form Validation Library. And after the validation rules are successful, send a response to Ajax in JSON format. Below is the complete source code for validating the Ajax Codeigniter form.
Source Code
Form_validation.php (Controllers)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Form_validation extends CI_Controller {
function index()
{
$this->load->view('form_validation');
}
function validation()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('subject', 'Subject', 'required');
$this->form_validation->set_rules('message', 'Message', 'required');
if($this->form_validation->run())
{
$array = array(
'success' => '<div class="alert alert-success">Thank you for Contact Us</div>'
);
}
else
{
$array = array(
'error' => true,
'name_error' => form_error('name'),
'email_error' => form_error('email'),
'subject_error' => form_error('subject'),
'message_error' => form_error('message')
);
}
echo json_encode($array);
}
}
?>
form_validation.php (Views)
<html>
<head>
<title>Form Validation with Ajax JQuery, JSON in Codeigniter </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Form Validation with Ajax JQuery, JSON in Codeigniter </h3>
<br />
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<span id="success_message"></span>
<form method="post" id="contact_form">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control" placeholder="Name" />
<span id="name_error" class="text-danger"></span>
</div>
<div class="form-group">
<input type="text" name="email" id="email" class="form-control" placeholder="Email Address" />
<span id="email_error" class="text-danger"></span>
</div>
<div class="form-group">
<input type="text" name="subject" id="subject" class="form-control" placeholder="Subject">
<span id="subject_error" class="text-danger"></span>
</div>
<div class="form-group">
<textarea name="message" id="message" class="form-control" placeholder="Message" rows="6"></textarea>
<span id="message_error" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" name="contact" id="contact" class="btn btn-info" value="Contact Us">
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#contact_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"<?php echo base_url(); ?>form_validation/validation",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#contact').attr('disabled', 'disabled');
},
success:function(data)
{
if(data.error)
{
if(data.name_error != '')
{
$('#name_error').html(data.name_error);
}
else
{
$('#name_error').html('');
}
if(data.email_error != '')
{
$('#email_error').html(data.email_error);
}
else
{
$('#email_error').html('');
}
if(data.subject_error != '')
{
$('#subject_error').html(data.subject_error);
}
else
{
$('#subject_error').html('');
}
if(data.message_error != '')
{
$('#message_error').html(data.message_error);
}
else
{
$('#message_error').html('');
}
}
if(data.success)
{
$('#success_message').html(data.success);
$('#name_error').html('');
$('#email_error').html('');
$('#subject_error').html('');
$('#message_error').html('');
$('#contact_form')[0].reset();
}
$('#contact').attr('disabled', false);
}
})
});
});
</script>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.