Help with form validation

[eluser]Cgull[/eluser]
Hello,
I have a contact form with jquery and codeigniter form validations.

The problem is, I need to push the submit button twice before the jquery errors appear on the screen.

Can anyone tell me why please?

My code:

Code:

$this->load->helper('form');

echo '<div class="error">';
echo validation_errors();
echo '</div>';

$attributes = array('id' => 'contactForm', 'class'=>'form', 'name'=>'contactForm');
echo form_open('contact', $attributes);

echo form_fieldset('Longridge Contact Form');

echo '<p>Required fields *</p>';
$labelAttr = array('class'=>'label');

$nameValue = $this->input->post('name');
$name = array(
        'name'=>'name',
        'id'=>'name',
        'size'=>'40',
        'value'=>$nameValue,
        );
echo '<div class="field">';
echo form_label('Name: *', 'name', $labelAttr);
echo form_input($name);
echo form_error('name');
echo '</div>';

$emailValue = $this->input->post('email');
$email = array(
        'name'=>'email',
        'id'=>'email',
        'size'=>'50',
        'value'=>$emailValue,
        );
echo '<div class="field">';
echo form_label('Email: *', 'email', $labelAttr);
echo form_input($email);
echo form_error('email');
echo '</div>';

$phoneValue = set_value('phone');
  
$phone = array(
         'name'=>'phone',
         'id'=>'phone',
         'size'=>'11',
         'value'=>$phoneValue,
         );
        
echo '<div class="field">';
echo form_label('Phone:', 'phone', $labelAttr);
echo form_input($phone);
echo form_error('phone');
echo '</div>';

echo '<div class="field">';
$message = array(
          'name'=>'message',
          'id'=>'message',
          'cols'=>40,
          'rows'=>4,
          );
echo form_label('Message: *', 'message', $labelAttr);
echo form_textarea($message);
echo form_error('message');
echo '</div>';

$submit = array(
         'name'=>'send',
         'id'=>'send',
         'value'=>'Send',
         'class'=>'submit',
         );
echo form_submit($submit);

echo form_fieldset_close();
?&gt;
&lt;input type="hidden" name="nospam" value="" /&gt;
</div>
[removed]
$(document).ready(function($) {
$('#contactForm').submit(function(e){
e.preventDefault();

$("#contactForm").validate({
  errorElement: "span",
   //set the rules for the fild names
   rules: {
   name: { required: true, minlength: 2 },
   email: { required: true, email: true, },
   message: { required: true, },
  },
  messages: {
      name: { required: "Please enter your name", minlength: "Please enter at least two letters.",},
    email: { required: "Please enter your email address.", email: "The email address you entered is not valid.", },
    message: { required: "Please write your message.", },
   },
   //our custom error placement
     errorPlacement: function(error, element) { error.appendTo(element.parent()); }
  });
});
});
[removed]

[eluser]jjDeveloper[/eluser]
what about

Code:

$('#submit').click(function() {
   $("#contactForm").validate();
});

[eluser]Cgull[/eluser]
Duh, of course !!!!

What a silly mistake !!!!

lol

Thank you very much.