Login

05-05-2009, 11:42 AM

[eluser]Mr Scientist[/eluser]
Hi all,

I have been writing a contact page for a website I'm building. This page has both front-end (JQuery) and backend (CodeIgniter) valiation in it. When the contact form is submitted the JQuery validation does seem to bring up errors but the page skips straight to the form action address regardless of there being validation erroes on the front-end.

Below is the code used in my view -

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;meta name="keywords" content="Photography, Portfolio, Photographs, Art, Pictures, Images, Photos" /&gt;

&lt;meta name="description" content="Photography portfolio for UK university graduate photographer Daniela Restaino"&gt;

&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;

&lt;title&gt;&lt;?php echo $page_title; ?&gt;&lt;/title&gt;

[removed][removed]

[removed][removed]

[removed]

    $(document).ready(function(){

        $("#contactForm").validate();

    });

[removed]

&lt;/head&gt;

&lt;body&gt;

<h1>Daniela Restaino Photography</h1>

<ul class="header-nav">

    <li>&lt;?php echo anchor('','Home', array('title' => 'Homepage'));?&gt;</li>

    <li>&lt;?php echo anchor('page/about', 'About', array('title' => 'About me'));?&gt;</li>

    <li>&lt;?php echo anchor('page/contact', 'Contact', array('title' => 'Contact me'));?&gt;</li>

</ul>

<p>Contact page</p>

&lt;?php echo form_open('page/contact', array('id' => 'contactForm'));?&gt;

    <label for="fname">First Name</label>

        &lt;?php echo form_error('fname'); ?&gt;

        &lt;input type="text" name="fname" id="fname" value="&lt;?php echo set_value('fname'); ?&gt;" maxlength="100" class="required" /&gt;

    <label for="sname">Surname</label>

        &lt;?php echo form_error('sname'); ?&gt;

        &lt;input type="text" name="sname" id="sname" value="&lt;?php echo set_value('sname'); ?&gt;" maxlength="100" class="required" /&gt;

    <label for="subject">Subject</label>

        &lt;?php echo form_error('subject'); ?&gt;

        &lt;input type="text" name="subject" id="subject" value="&lt;?php echo set_value('subject'); ?&gt;" maxlength="300" class="required" /&gt;

    <label for="eaddress">Email Address</label>

        &lt;?php echo form_error('eaddress'); ?&gt;

        &lt;input type="text" name="eaddress" id="eaddress" value="&lt;?php echo set_value('eaddress'); ?&gt;" maxlength="100" class="required email" /&gt;

    <label for="message">Message</label>

        &lt;?php echo form_error('message'); ?&gt;

        &lt;textarea name="message" id="message" value="&lt;?php echo set_value('message'); ?&gt;" rows="10" cols="100" class="required" /&gt;&lt;/textarea>

    &lt;?php echo form_submit('submit', 'Send email');?&gt;

    &lt;input type="reset" value="Clear" /&gt;

&lt;/form&gt;

I was hoping that one of you guys here on the forum may able to help to get both the font and backend validation working propery.

05-05-2009, 11:56 AM

[eluser]TheFuzzy0ne[/eluser]
It sounds to me like your JavaScript validate() function is not returning false or something along those lines. Please post your validate() function.

05-05-2009, 02:20 PM

[eluser]Mr Scientist[/eluser]
The validate function is one that is part of the jQuery Validation Plugin.

The documentation is available here - jQuery Validation Documentation

05-05-2009, 04:11 PM

[eluser]Mr Scientist[/eluser]
I've now written the following script which I've been having the same problems as mentioned earlier

Code:
$(document).ready(function() {

    // validate signup form on keyup and submit

    var validator = $("#contactForm").validate({

        rules: {

            fname: "required",

            sname: "required",

            subject: "required",

            message: "required",

            eaddress: {

                required: true,

                email: true

            },

        },

        messages: {

            fname: "Enter your firstname",

            sname: "Enter your surname",

            subject: "Enter a subject",

            message: "Enter a message",

            eaddress: {

                required: "Please enter a valid email address"

            },

        },

        // specifying a submitHandler prevents the default submit, good for the demo

        submitHandler: function() {

            alert("submitted!");

        },

        // set this class to error-labels to indicate valid fields

        success: function(label) {

            // set &nbsp; as text for IE

            label.html("&nbsp;").addClass("checked");

        }

    });

});

The only thing that has changed in the view is that the classes on each form element has been removed and also the following code

Code:
$(document).ready(function(){

        $("#contactForm").validate();

    });