jquery validate remote validation only works if field is changed

Question

<?PHP
$attributes = array('class' => "profile_form", 'id' => "profile_form",'name'=>"profile_form");
echo form_open_multipart("$form_action",$attributes);
?>
<LABEL for='email'>E-Mail</LABEL>
<INPUT type='text' id='email' name="email" class="w200" value='<?PHP echo $email;?>' remote="<?PHP echo base_url()."php/unique_email.php?id=$id"; ?>">
<DIV class='ca clr-lr'>
<input type="submit" id="submitbutton" name="submitbutton" value="<?PHP echo $title;?>" class="pr mbutton"/>
</DIV>
</FORM>

and

    rules: {
        email: {
            required:true,
            email:true
        }
    }

This is the code I am using to to validate email field. It works fine if I change the email field or type a new value, but If I just submit the form it gives me an error. After a brief inspection I found out that the submit button is not included in post data if I do not edit the email field.

What am I doing wrong, please help.

And here is my controller code, It might help expand the scope of debugging. I am checking whether submitbutton is part of post data or not.

if($this->input->post('submitbutton') !== false){
        if ($this->form_validation->run('admin_profile_form') == FALSE){
            $form=(array)$this->input->post();
            $data=array_merge($form,$data);
        }else{
            //database fields
            $database = array(
                'first_name' => $this->input->post('first_name'),
                'last_name' => $this->input->post('last_name'),
                'email' => $this->input->post('email'),
                'phone' => $this->input->post('mobile')
            );
            $user_id=$user->id;
            $this->db->where('id',$user_id);
            $this->db->update('users',$database);
            $this->session->set_flashdata('message_type', 'info');
            $this->session->set_flashdata('message', 'Profile updated');
            redirect($this->homepage);
            return;
        }
    }

And finally the solution as suggested by Fabio Antunes worked.

I changed the rule as following and removed the inline remote from the input field

        email: {
            required:true,
            email:true,
            remote: {
                url: "php/unique_email.php",
                async: false,
                type: "post",
                data: { id: $('#edit_id').val() }
            }
        }

Fabio Antunes · Answer 1 · 2013-03-14T11:11:29.417

1

EDIT

As you said your code is already working you can put this on your js file you must use this function $("#profile_form").validate({}) so it validates on the submit and on the keyup event

<script>
$().ready(function() {

        // validate signup form on keyup and submit
        $("#profile_form").validate({
    rules: {
        email: {
            email: true
        }
    },
    messages: {
        email: {
            email: "Please provide a valid email"
        }
    }
}); 
});

I've noticed that in your view you have this

<INPUT type='text' id='email' name="email" class="w200" value='<?PHP echo $email;?>' remote="<?PHP echo base_url()."php/unique_email.php?id=$id"; ?>">

Instead put this

<INPUT type='text' id='email' name="email" class="w200" value='<?PHP echo $email;?>' remote="<?PHP echo base_url()."php/unique_email.php?id=".$id; ?>">

If you notice your $id was inside the string

edited Mar 14 '13 at 11:11

answered Mar 14 '13 at 10:54

Fabio Antunes

22,251
15
81
96

The thing is my javascript code is in a .js file, that's why I was using remote attribute. Using caps for php and html tag is just what I feel comfortable with, nothing special about it. Your code looks just like another version of mine, although I am not sure about the type: post. Can you please point fault in my code, it will be much appreciated. Thanks in advance. My code works fine if I type something in field, it causes problem when I submit form even with a valid value without typing anything in field(ie firing of remote validation) – Aman Aujla Mar 14 '13 at 11:05
Both versions i.e. embedded variable in string or otherwise will produce same output in browser. But anyhow I tried your suggestions but still now luck. I have added my controller code responsible for form handling my my questions. Maybe I am doing something wrong there. – Aman Aujla Mar 14 '13 at 11:23
Your previous suggestion, ie putting the remote value in rules worked with some tweaks. I think the async: false and type: "post" is the reason for success this time. – Aman Aujla Mar 14 '13 at 16:12
Well I'm glad that I helped you out somehow – Fabio Antunes Mar 14 '13 at 16:31

score -1 · Answer 2 · answered Mar 14 '13 at 10:40

-1

try this setting

$(/*your form*/).validate({  
    onsubmit: true
})

answered Mar 14 '13 at 10:40

Cris

12,799
5
35
50

Please don't mind me asking but what will this do. I am asking to make sure that it won't other parts of my code. – Aman Aujla Mar 14 '13 at 10:43
This will always validate your form on submit,i hope that is what you want – Cris Mar 14 '13 at 10:43
1

I want my form to validate and submit properly without me typing in email field. It looks like the remove validation is causing the error, I tested without remote validation and everything worked fine.Thanks for your previous tip, I learned something new. – Aman Aujla Mar 14 '13 at 11:07
By default, this option is already true. [As per the docs](http://jqueryvalidation.org/validate/), _"a boolean `true` is not a valid value"_ for the `onsubmit` option. – Sparky Mar 03 '14 at 19:10

jquery validate remote validation only works if field is changed

2 Answers2