[eluser]tim1965[/eluser]
Hi
I am having a problem getting jquery form validation to work in my CI environment. The reason i am posting here is that its not a problem with jquery as i can take the page out of the CI directory framework and the Jquery validation plugin is called correctly.
I have correctly set up form validation with CI and this is being actioned correctly. However i want to apply Jquery validation prior to calling the CI form validation. I have set echo base_url to call my jquery libraries and i am not getting any errors calling these in firebug. I know my jquery script is being called as i have a small set focus routine at the beginning of the script that is being called and correctly setting focus. So the issue seems to be the Jquery validation itself is not being handled correctly. So when i hit submit the CI validation is correclty called but the jquery validation is ignored.
Any help on this would be much appreciated.
My controller
<?php
Code:
class c_f_propreg1_username_v1 extends Controller {
function index()
{
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->load->database();
$this->form_validation->set_rules('title', 'Title', 'required');
$this->form_validation->set_rules('first_name', 'First Name', 'required|max_length[50]|alpha');
$this->form_validation->set_rules('last_name', 'Last Name', 'required|max_length[50]|alpha');
$this->form_validation->set_rules('email', 'Email', 'required|max_length[100]|valid_email|unique[login.email]');
$this->form_validation->set_rules('username', 'Username', 'required|min_length[6]|max_length[12]|alpha_numeric|unique[login.username]');
$this->form_validation->set_rules('pwd', 'Password', 'required|min_length[6]|max_length[12]|alpha_numeric');
$this->form_validation->set_rules('conf_pwd', 'Password Confirmation', 'required|matches[pwd]|alpha_numeric');
$this->form_validation->set_rules('terms', 'Accept our Terms', 'required');
if ($this->form_validation->run() == FALSE)
{
$this->load->view('f_propreg1_username_v1');
}
else
{
$this->load->view('formsuccess');
}
}
}
?>
relevant bits of my view
Code:
[removed][removed]
[removed][removed]
[removed][removed]
<link href="<?php echo base_url().'/system/static/css/f_propreg1.css'; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
New User Registration
<?php echo form_open('c_f_propreg1_username_v1'); ?>
<form method="POST" name="f_propreg1_username_v1" id="f_propreg1_username_v1">
jquery script
First function is called correctly, second function is ignored.
Code:
// JavaScript Document
$(document).ready(function() {
$('#title').focus();
});
$(document).ready(function() {
$('#f_propreg1_username_v1').validate({
rules: {
email: {
required: true,
email: true
},
username: {
required: true,
rangelength:[6,12]
},
pwd: {
required: true,
rangelength:[6,12]
},
terms: {
required: true
},
conf_pwd: {equalTo:'#pwd'},
spam: "required"
}, // end rules
messages: {
email: {
required: "This field is Required.",
email: "This is not a valid email address."
},
username: {
required: "This field is Required.",
rangelength: "Username must be between 6 and 12 characters long."
},
pwd: {
required: "This field is Required.",
rangelength: "Password must be between 6 and 12 characters long."
},
conf_pwd: {
equalTo: "The two passwords do not match."
},
terms: {
required: "Please accept our Terms and Conditions"
}
} //end messages
}); // end validate
}); //end ready
Any help would be much appreciated and apologises if anybody thinks i have posted in the worng location.