Code Igniter Validation? jQuery Validation? Or Pre-Populating Forms? Better way to do this?

[eluser]mfroseth[/eluser]
Hey Everyone,
I've asked several questions about a Rate Calculator I have been building and am stuck on something yet again. I use the following javascript to show/hide a form depending on which one is selected through a drop down.

Code:

[removed]
$(document).ready(function() {
    $("#plan_type").change(function(){
        id = $(this).val();
        if ( id == "graded" )    {
                $("#tobacco").hide();
       $("#faceGraded").show();
       $("#faceLevel").hide();
    $("#sex").show();
    $("#ageGraded").show();  
    $("#ageLevel").hide();
    $("#adb").hide();  

        }
            else if    ( id == "level" ) {
                $("#tobacco").show();
       $("#faceLevel").show();
    $("#faceGraded").hide();
    $("#sex").show();
    $("#ageLevel").show();
    $("#ageGraded").hide();
    $("#adb").hide();  
            }
  
            else if    ( id == "default" ) {
                $("#tobacco").hide();
       $("#faceLevel").hide();
    $("#faceGraded").hide();
    $("#sex").hide();
    $("#ageGraded").hide();
    $("#ageLevel").hide();
    $("#adb").hide();

            }
                else {
                    $("#tobacco").show();
     $("#faceGraded").hide();
     $("#faceLevel").hide();
                }
    });
    
    //initial settings
                $("#tobacco").hide();
       $("#faceLevel").hide();
    $("#faceGraded").hide();
    $("#sex").hide();
    $("#ageGraded").hide();
    $("#ageLevel").hide();
    $("#adb").hide();  
  
});
[removed]

You can see this live at http://newco.ratecal.info (for agent id just type in anything, its not working yet, only storing a session).

Now, I want to validate as much as I can and right now, I have it working so that it just returns you to the /results/ page and spits out the error at the top (invalid amount, invalid age, etc...) I'd really like to be able to prepopulate the forms if there is an error, so they don't have to re-enter all the information.

My ultimate goal is to show errors as they are happening in a <span> next to the field (using jquery, ajax or whatever).

I know I'm probably doing this wrong, but this is the first time I've used Code Igniter and even built an application like this one (multiple forms). Is this even possible with the route I am taking? Here is the view file of home.php which has the forms:

Code:

<div id="body">
<h3><center>Please Choose a Plan Below To Start</center></h3>
&lt;?php echo validation_errors(); ?&gt;
&lt;?php echo form_open('home/process'); ?&gt;
    <p>
    <label for="plan_type">Plan Type:</label> <br />
&lt;?php $options = array('default' =>'Select A Plan','level' => 'Final Expense Level Death Benefit', 'graded' => 'Final Expense Graded Death Benefit'); ?&gt;
    &lt;?php echo form_dropdown('plan_type', $options, 'required','id="plan_type"'); ?&gt;
    </p>
    <div id="sex">
        <p>
        <label for="sex">Sex:</label><br />
     &lt;input type="radio" class="radio" name="sex" value="male" &lt;?php echo set_radio('sex', 'male'); ?&gt;&gt; Male
        &lt;input type="radio" class="radio" name="sex" value="female" &lt;?php echo set_radio('sex', 'female'); ?&gt;&gt; Female
        </p>
    </div>
        <div id="tobacco">
        <p>
        <label for="tobacco">Tobacco Use:</label><br />
     &lt;input type="radio" class="radio" name="tobacco" value="non-tobacco" &lt;?php echo set_radio('tobacco', 'non-tobacco'); ?&gt;checked&gt; Non-Tobacco
        &lt;input type="radio" class="radio" name="tobacco" value="tobacco" &lt;?php echo set_radio('tobacco', 'tobacco'); ?&gt;&gt; Tobacco
        </p>
        </div>
     <div id="ageGraded">
        <p>
        <label for="ageGraded">Age: <em>(45-80)</em></label><br />
  &lt;input type="number" class="age" name="ageGraded" id="ageGraded" min="45" max="80"&gt;
        </p>
        </div>
     <div id="ageLevel">
        <p>
        <label for="ageLevel">Age: <em>(45-85)</em></label><br />
  &lt;input type="number" class="age" name="ageLevel" id="ageLevel" min="45" max="80"&gt;
        </p>
        </div>
        <div id="faceGraded">
        <p>
        <label for="face_amount_graded">Face Amount:<em> ($2,000-$20,000)</em></label><br />
  &lt;input type="number" class="faceAmount" name="face_amount_graded" id="face_amount_graded" min="2000" max="20000"&gt;
        </p>
        </div>
        <div id="faceLevel">
        <p>
        <label for="face_amount_level">Face Amount:<em> ($2,000-$40,000)</em></label><br />
  &lt;input type="number" class="faceAmount" name="face_amount_level" id="face_amount_level" min="2000" max="40000"&gt;
        </p>
        </div>
        <div id="adb">
        <p>
        <label for="adb">Accidental Death Benefit</label><br />
        &lt;?php $death_benefit = array('yes' => 'Yes', 'no' => 'No'); ?&gt;
        &lt;?php echo form_dropdown('adb', $death_benefit); ?&gt;
        </p>
        </div>
        <p class="submit">&lt;?php echo form_submit('submit', 'Submit'); ?&gt;</p>
        &lt;?php echo form_close(); ?&gt;
        </div>

[eluser]PhilTem[/eluser]
You should always keep in mind:
Some people have JavaScript deactivated for security reasons.

Therefore you should implement both: Server-side data validation (with CI's form-validation) as well as user-side data validation (on input and with JavaScript - if activated).

I usually first create all my projects for people who have JavaScript deactivated - since this will also work for those who use JS. Then, after a lot of testing and bug fixing, i.e. when I know that everything works as desired/expected, I add JavaScript/AJAX to my projects.

Otherwise I like the approach that data validation is done during user input. However, there should be a delay between e.g. some mouseDown-event and the validation otherwise data, that is just being entered, might fail validation but is actually right once it's totally entered.

Hope you got what I tried to explain

[eluser]mfroseth[/eluser]
[quote author="PhilTem" date="1339686421"]You should always keep in mind:
Some people have JavaScript deactivated for security reasons.

Therefore you should implement both: Server-side data validation (with CI's form-validation) as well as user-side data validation (on input and with JavaScript - if activated).

I usually first create all my projects for people who have JavaScript deactivated - since this will also work for those who use JS. Then, after a lot of testing and bug fixing, i.e. when I know that everything works as desired/expected, I add JavaScript/AJAX to my projects.

Otherwise I like the approach that data validation is done during user input. However, there should be a delay between e.g. some mouseDown-event and the validation otherwise data, that is just being entered, might fail validation but is actually right once it's totally entered.

Hope you got what I tried to explain [/quote]

Thank you for your response. Am I doing this the right way though as far as you can tell? I keep telling myself that I am not. Because with these multiple form fields. If the end-user selects, say "Level Death Benefit" they see the option for Tobacco or Non-Tobacco. Now if the end-user selects "Graded Death Benefit" there is no option for "Tobacco" or "Non-Tobacco" the calculator just defaults to "Tobacco" for that selected plan. In my code, I still have that field there.

My thoughts are, if the field is still there validation won't work for the selected plan. Am I right? Is there a better way to handle multiple forms, on the same page? Basically I have two forms (in a sense, in reality its just one, depending on their selection some fields show and others do not).

The same goes for age. For "Graded" the age limit is 80 and for "level" its 85. The way I've done it now, is call one field age_graded and the other age_level and I hide them based on their plan selection. I can't wrap my head around how this would work if I wanted to preopulate the data. Because with the javascript code I am doing, I can't seem to default to a specific selection on that plan type drop down and the correct fields show. When I do, it just shows empty and I have to select one plan and then go back to the other.

My knowledge on javascript/jquery/ajax is really limited, I'm probably doing this in the most difficult and not-so-user-friendly way possible, haha.

Thanks,