Welcome Guest, Not a member yet? Register   Sign In
codeigniter form validation and jquery form validation problem
#1

[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.
#2

[eluser]simshaun[/eluser]
As far as my HTML knowledge goes, you can't nest a form within a form.

Code:
<?php echo form_open('c_f_propreg1_username_v1'); ?>

<form method="POST" name="f_propreg1_username_v1" id="f_propreg1_username_v1">

As to your javascript, why use 2 document.ready's in the same spot?

Optimized:
Code:
// JavaScript Document
$(document).ready(function() {
$('#title').focus();

$('#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

The issue makes it sound like the form submit is not being stopped by the jQuery validation.
If it was working, then the JavaScript would be ran without a page reload... CodeIgniter should not even see the form post until jQuery validation passes.

I believe you have an error in your logic inside your view.
You might want to post the full code if you want us to debug it.
#3

[eluser]tim1965[/eluser]
full view code as requested. I have removed the second form reference and optimized the javascript but that didnt fix it. thanks in advance for your time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
[removed][removed]
[removed][removed]
[removed][removed]
&lt;link href="&lt;?php echo base_url().'/system/static/css/f_propreg1.css'; ?&gt;" rel="stylesheet" type="text/css" /&gt;
&lt;link href="../../static/css/f_propreg1.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;

New User Registration
&lt;?php echo form_open('c_f_propreg1_username_v1'); ?&gt;


<fieldset><legend>Your Name</legend>

<div> <label for="title">Title</label></div>
<select name="title" id="title" class="required" value="&lt;?php echo set_value('title'); ?&gt;" title="Please select your Title">
<option value="">--Select Title--</option>
<option value="Mr"&lt;?php echo set_select('title', 'Mr'); ?&gt; >Mr</option>
<option value="Mrs"&lt;?php echo set_select('title', 'Mrs'); ?&gt;>Mrs</option>
<option valuwd="Miss"&lt;?php echo set_select('title', 'Miss'); ?&gt;>Miss</option>
<option value="Ms"&lt;?php echo set_select('title', 'Ms'); ?&gt;>Ms</option>
</select>
*<span class="phperror">&lt;?php echo form_error('title'); ?&gt;</span>
<div><label for="firstname">First Name:</label></div>
&lt;input name="first_name" type="text" class="required" id="first_name" title="Please enter your First Name" value="&lt;?php echo set_value('first_name'); ?&gt;" size="50" maxlength="70" /&gt;
*<span class="phperror">&lt;?php echo form_error('first_name'); ?&gt;</span>
<div><label for="lastname">Last Name:</label></div>
&lt;input name="last_name" type="text" id="last_name" value="&lt;?php echo set_value('last_name'); ?&gt;" size="50" maxlength="50" class="required" title="Please enter your Last Name" /&gt;
*<span class="phperror">&lt;?php echo form_error('last_name'); ?&gt;</span>
</fieldset>
<fieldset><legend>Login and Password</legend>
Fields marked with an Asterick are mandatory
<div><label for="email">Please Enter your E-mail Address</label></div>
&lt;input name="email" type="text" value="&lt;?php echo set_value('email'); ?&gt;" id="email" /&gt; *<span class="phperror">&lt;?php echo form_error('email'); ?&gt;</span>
<div><label for="username">Choose a Username</label></div>
&lt;input name="username" type="text" id="username" value="&lt;?php echo set_value('username'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars-Max 12 chars<span class="phperror">&lt;?php echo form_error('username'); ?&gt;</span>
<div><label for="pwd">Choose a Password</label></div>
&lt;input name="pwd" type="password" id="pwd" value="&lt;?php echo set_value('pwd'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('pwd'); ?&gt;</span>
<div><label for="conf_pwd">Re-enter Password</label></div>
&lt;input name="conf_pwd" type="password" id="conf_pwd" value="&lt;?php echo set_value('conf_pwd'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('conf_pwd'); ?&gt;</span>
<div><label for="passwordhint">Password Hint</label></div>
&lt;input name="Passwordhint" type="text" id="passwordhint" value="&lt;?php echo set_value('passwordhint'); ?&gt;" maxlength="20" /&gt;
<p> Accept our Terms and Conditions
&lt;input name="terms" type="checkbox" value="1"&lt;?php echo set_checkbox('terms','1'); ?&gt; id="terms" /&gt;
*<span class="phperror">&lt;?php echo form_error('terms'); ?&gt;</span></p>
</fieldset>
&lt;input name="" type="submit" /&gt;


&lt;/body&gt;
&lt;/html&gt;
#4

[eluser]simshaun[/eluser]
The optimization wasn't supposed to fix it.. just comply with my OCD. Smile

Please wrap your code in [ CODE ] [ /CODE ] tags. (without the spaces between the bracket and CODE)
#5

[eluser]tim1965[/eluser]
Sorry if my reply was confusing (i understood what you were getting at). Code below. Thanks

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
[removed][removed]
[removed][removed]
[removed][removed]
&lt;link href="&lt;?php echo base_url().'/system/static/css/f_propreg1.css'; ?&gt;" rel="stylesheet" type="text/css" /&gt;
&lt;link href="../../static/css/f_propreg1.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;

New User Registration
&lt;?php echo form_open('c_f_propreg1_username_v1'); ?&gt;


<fieldset><legend>Your Name</legend>
  
     <div> <label for="title">Title</label></div>
             <select name="title" id="title" class="required" value="&lt;?php echo set_value('title'); ?&gt;" title="Please select your Title">
            <option value="">--Select Title--</option>
            <option value="Mr"&lt;?php echo set_select('title', 'Mr'); ?&gt; >Mr</option>
            <option value="Mrs"&lt;?php echo set_select('title', 'Mrs'); ?&gt;>Mrs</option>
            <option valuwd="Miss"&lt;?php echo set_select('title', 'Miss'); ?&gt;>Miss</option>
            <option value="Ms"&lt;?php echo set_select('title', 'Ms'); ?&gt;>Ms</option>
            </select>
             *<span class="phperror">&lt;?php echo form_error('title'); ?&gt;</span>
            <div><label for="firstname">First Name:</label></div>
            &lt;input name="first_name" type="text" class="required" id="first_name" title="Please enter your First Name" value="&lt;?php echo set_value('first_name'); ?&gt;" size="50" maxlength="70" /&gt;
*<span class="phperror">&lt;?php echo form_error('first_name'); ?&gt;</span>
<div><label for="lastname">Last Name:</label></div>
&lt;input name="last_name" type="text" id="last_name" value="&lt;?php echo set_value('last_name'); ?&gt;" size="50" maxlength="50" class="required" title="Please enter your Last Name" /&gt;
  *<span class="phperror">&lt;?php echo form_error('last_name'); ?&gt;</span>
</fieldset>
<fieldset><legend>Login and Password</legend>
Fields marked with an Asterick are mandatory
<div><label for="email">Please Enter your E-mail Address</label></div>
&lt;input name="email" type="text" value="&lt;?php echo set_value('email'); ?&gt;" id="email" /&gt; *<span class="phperror">&lt;?php echo form_error('email'); ?&gt;</span>
<div><label for="username">Choose a Username</label></div>
&lt;input name="username" type="text" id="username" value="&lt;?php echo set_value('username'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars-Max 12 chars<span class="phperror">&lt;?php echo form_error('username'); ?&gt;</span>
<div><label for="pwd">Choose a Password</label></div>
&lt;input name="pwd" type="password" id="pwd" value="&lt;?php echo set_value('pwd'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('pwd'); ?&gt;</span>
<div><label for="conf_pwd">Re-enter Password</label></div>
&lt;input name="conf_pwd" type="password" id="conf_pwd" value="&lt;?php echo set_value('conf_pwd'); ?&gt;" size="15" maxlength="12" /&gt;
* Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('conf_pwd'); ?&gt;</span>
<div><label for="passwordhint">Password Hint</label></div>
  &lt;input name="Passwordhint" type="text" id="passwordhint" value="&lt;?php echo set_value('passwordhint'); ?&gt;" maxlength="20" /&gt;
<p> Accept our Terms and Conditions
  &lt;input name="terms" type="checkbox" value="1"&lt;?php echo set_checkbox('terms','1'); ?&gt; id="terms" /&gt;
   *<span class="phperror">&lt;?php echo form_error('terms'); ?&gt;</span></p>
</fieldset>
&lt;input name="" type="submit" /&gt;


&lt;/body&gt;
&lt;/html&gt;
#6

[eluser]thecancerus[/eluser]
i suggest you check the javascript error that is coming... if their is a JS error or JS is disabled, only then Jquery validation plugin will fail other wise it works properly.
#7

[eluser]simshaun[/eluser]
Try this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
[removed][removed]
[removed][removed]
[removed][removed]
&lt;link href="&lt;?php echo base_url().'/system/static/css/f_propreg1.css'; ?&gt;" rel="stylesheet" type="text/css" /&gt;
&lt;link href="../../static/css/f_propreg1.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;

New User Registration

&lt;?php echo form_open('replace_this_with_the_action', array('id' => 'c_f_propreg1_username_v1')); ?&gt;

[removed]
// JavaScript Document
$(document).ready(function(){
    $('#title').focus();

    $('#c_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: true
            }
        } // 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
[removed]

<fieldset><legend>Your Name</legend>

    <div><label for="title">Title</label></div>
    <select name="title" id="title" class="required" value="&lt;?php echo set_value('title'); ?&gt;" title="Please select your Title">
        <option value="">--Select Title--</option>
        <option value="Mr"&lt;?php echo set_select('title', 'Mr'); ?&gt; >Mr</option>
        <option value="Mrs"&lt;?php echo set_select('title', 'Mrs'); ?&gt;>Mrs</option>
        <option valuwd="Miss"&lt;?php echo set_select('title', 'Miss'); ?&gt;>Miss</option>
        <option value="Ms"&lt;?php echo set_select('title', 'Ms'); ?&gt;>Ms</option>
    </select>
    *<span class="phperror">&lt;?php echo form_error('title'); ?&gt;</span>

    <div><label for="firstname">First Name:</label></div>
    &lt;input name="first_name" type="text" class="required" id="first_name" title="Please enter your First Name" value="&lt;?php echo set_value('first_name'); ?&gt;" size="50" maxlength="70" /&gt;
    *<span class="phperror">&lt;?php echo form_error('first_name'); ?&gt;</span>

    <div><label for="lastname">Last Name:</label></div>
    &lt;input name="last_name" type="text" id="last_name" value="&lt;?php echo set_value('last_name'); ?&gt;" size="50" maxlength="50" class="required" title="Please enter your Last Name" /&gt;
    *<span class="phperror">&lt;?php echo form_error('last_name'); ?&gt;</span>

</fieldset>

<fieldset><legend>Login and Password</legend>
    Fields marked with an Asterick are mandatory

    <div><label for="email">Please Enter your E-mail Address</label></div>
    &lt;input name="email" type="text" value="&lt;?php echo set_value('email'); ?&gt;" id="email" /&gt; *<span class="phperror">&lt;?php echo form_error('email'); ?&gt;</span>

    <div><label for="username">Choose a Username</label></div>
    &lt;input name="username" type="text" id="username" value="&lt;?php echo set_value('username'); ?&gt;" size="15" maxlength="12" /&gt;
    * Min 6 chars-Max 12 chars<span class="phperror">&lt;?php echo form_error('username'); ?&gt;</span>

    <div><label for="pwd">Choose a Password</label></div>
    &lt;input name="pwd" type="password" id="pwd" value="&lt;?php echo set_value('pwd'); ?&gt;" size="15" maxlength="12" /&gt;
    * Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('pwd'); ?&gt;</span>

    <div><label for="conf_pwd">Re-enter Password</label></div>
    &lt;input name="conf_pwd" type="password" id="conf_pwd" value="&lt;?php echo set_value('conf_pwd'); ?&gt;" size="15" maxlength="12" /&gt;
    * Min 6 chars - Max 12 chars<span class="phperror">&lt;?php echo form_error('conf_pwd'); ?&gt;</span>

    <div><label for="passwordhint">Password Hint</label></div>
    &lt;input name="Passwordhint" type="text" id="passwordhint" value="&lt;?php echo set_value('passwordhint'); ?&gt;" maxlength="20" /&gt;

    <p> Accept our Terms and Conditions
    &lt;input name="terms" type="checkbox" value="1"&lt;?php echo set_checkbox('terms','1'); ?&gt; id="terms" /&gt;
    *<span class="phperror">&lt;?php echo form_error('terms'); ?&gt;</span></p>
</fieldset>

&lt;input name="" type="submit" /&gt;

&lt;?php echo form_close(); ?&gt;

&lt;/body&gt;
&lt;/html&gt;

I'm assuming your syntax for the config is correct.
#8

[eluser]tim1965[/eluser]
Summer Student

Are you saying that you cannot see a problem with my view,therefore it must be a jquery error.
As i said earlier i dont see any JS errors and it seems to get called correctly, albeit nothing is happening.
If this is the case and you cannot see any issues on the CI side, then i will focus on the JS side.
Many thanks for your time.
#9

[eluser]simshaun[/eluser]
See my previous reply...
It is not an error with the form validation lib itself, because I also use it.

1. You were calling form_open incorrectly. You passed it the id you wanted it to have.. see my post for the correct syntax.

2. You had no form close.

3. Your JavaScript was calling .validate() on the wrong ID.. see my post again.

4. Ensure that you add back in what these forums took out from the header and body (where it says [removed]).

I see no reason why it should not work now unless you fail to load the correct files in the head tag and don't add back in the script tags.
#10

[eluser]thecancerus[/eluser]
tim1965,

in case of js error form get submitted properly, and because of page reload(thanks to form submission) you miss out on js errors.




Theme © iAndrew 2016 - Forum software by © MyBB