I am building a form with codeIgniter. I have some required fields in my form and when the required fields are blank the form goes to the same page. What I want to do is that when a required field is empty, it will prompt an alert saying that the fields are required. As I am new to programming I am finding it difficult to do this function. Can any one tell me how can I do this. Thanks. FYI, the other functionality of the form is fine.
Part of my controller:
function index() {
$this->form_validation->set_rules('address', 'address', 'required');
$this->form_validation->set_rules('area', 'area', '');
$this->form_validation->set_rules('lat', 'latitude', 'required');
$this->form_validation->set_rules('lng', 'longitude', 'required');
$this->form_validation->set_rules('subject', 'subject', 'required');
$this->form_validation->set_rules('problem', 'problem detail', 'required');
// validation hasn't been passed
if ($this->form_validation->run() == FALSE)
{
$this->load->view('report_view',$data );
}
else // passed validation proceed to post success logic
{
///do something.....
}
Part of my view:
<?php // Change the css classes to suit your needs
$attributes = array('class' => '', 'id' => '');
echo form_open_multipart('report', $attributes);
?>
<p>
<br/>
<label for="address">Address <span class="required">*</span></label>
<?php echo form_error('address'); ?>
<br />
<input id="address" type="text" name="address"
value="<?php echo set_value('address'); ?>" />
</p>
<p>
<label for="area">Area </label>
<?php echo form_error('area'); ?>
<br />
<input id="area" type="text" name="area"
value="<?php echo set_value('area'); ?>" />
</p>
<p>
<label for="lat">Latitude<span class="required">*</span></label>
<?php echo form_error('lat'); ?>
<br />
<input id="lat" type="text" name="lat"
value="<?php echo set_value('lat'); ?>" />
<p>
<label for="lng">Longitude<span class="required">*</span></label>
<?php echo form_error('lng'); ?>
<br />
<input id="lng" type="text" name="lng"
value="<?php echo set_value('lng'); ?>" />
</p>
<p>
<label for="subject">Subject:<span class="required">*</span></label>
<?php echo form_error('subject'); ?>
<br />
<input id="subject" type="text" name="subject"
value="<?php echo set_value('subject'); ?>" />
</p>
<p>
<label for="problem">Problem detail:<span class="required">*</span></label>
<?php echo form_error('problem', '</div>'); ?>
<br />
<textarea id="problem" style="width:300px; height:80px"
type="text" name="problem"><?php echo set_value('problem'); ?>
</textarea>
</p>
My model:
function SaveForm($form_data)
{
$this->db->insert('info', $form_data);
if ($this->db->affected_rows() == '1')
{
return TRUE;
}
return FALSE;
}
A tested example
Your controller file:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->library('session');
$this->load->helper('url');
$this->load->library('form_validation');
if ($this->input->server('REQUEST_METHOD') == 'POST') { // make sure it's post request
$this->form_validation->set_error_delimiters('', '');
$this->form_validation->set_rules('address', '<b>address</b>', 'required|xss_clean');
$this->form_validation->set_rules('area', '<b>area</b>', 'xss_clean');
$this->form_validation->set_rules('lat', '<b>lat</b>', 'required|xss_clean');
$this->form_validation->set_rules('lng', '<b>lng</b>', 'required|xss_clean');
$this->form_validation->set_rules('subject', '<b>subject</b>', 'required|xss_clean');
$this->form_validation->set_rules('problem', '<b>problem</b>', 'required|xss_clean');
if ($this->form_validation->run() !== FALSE) { // validation has passed
// insert the form data into database
$this->db->insert('info', $form_data);
// do other stuff
redirect('/index.php/success-page');
} else {
$this->session->set_userdata($this->session->flashdata_key . ':old:error', 'We have some form error. Please review them!');
}
}
$this->load->view('welcome_message');
}
}
Your view file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<style type="text/css">
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
</style>
</head>
<body>
<form method="post">
<?php if ($this->session->flashdata('error') != '') { ?>
<?php echo $this->session->flashdata('error');?><br />
<?php } ?>
<label>address</label>
<input type="text" name="address" value="<?php echo set_value('address');?>" /><br />
<?php if (form_error('address')) { ?><?php echo form_error('address');?><br /><?php } ?>
<label>area</label>
<input type="text" name="area" value="<?php echo set_value('area');?>" /><br />
<?php if (form_error('area')) { ?><?php echo form_error('area');?><br /><?php } ?>
<label>lat</label>
<input type="text" name="lat" value="<?php echo set_value('lat');?>" /><br />
<?php if (form_error('lat')) { ?><?php echo form_error('lat');?><br /><?php } ?>
<label>lng</label>
<input type="text" name="lng" value="<?php echo set_value('lng');?>" /><br />
<?php if (form_error('lng')) { ?><?php echo form_error('lng');?><br /><?php } ?>
<label>subject</label>
<input type="text" name="subject" value="<?php echo set_value('subject');?>" /><br />
<?php if (form_error('subject')) { ?><?php echo form_error('subject');?><br /><?php } ?>
<label>problem</label>
<input type="text" name="problem" value="<?php echo set_value('problem');?>" /><br />
<?php if (form_error('problem')) { ?><?php echo form_error('problem');?><br /><?php } ?>
<input type="submit" value="Submit">
</form>
</body>
</html>
Notes:
* use $this->input->server('REQUEST_METHOD') == 'POST' to make sure the form validation runs only on form submit
* if you have a form error don't show another page or redirect, just leave the user on the same page to show the errors
I found resources about jquery and ci form validation..
As if first link is better than other..
You should call you controller function from jquery and before calling that function be sure to validate if the text box empty prompt an alert box that a filed is empty by using if ( $("#textbox").val().length === 0 ) 0 means that textbox have no value and it is empty after this you can call your controller function using document.location.href = '<?=base_url()." YOUR_CONTROLLER/FUNCTION?>'
P.S: javascript validation can be risky
you con validate the form fields at client side (on HTML page) by using javascript-
<script>
function yourfunctionname()
{
if(document.formname.textfieldname.value=="")
{
alert("text field is required..");
document.formname.textfieldname.focus();
return false;
}
}
</script>