I am trying to validate a form. The form is dynamically generated and added to div on the page. When submitting the form I want the validation to be performed at once. What happens now is that the first time I submit the form is posted without being validated. The second time I hit submit it's validate.

Here is my script:

$("#registerform").live("submit", function(e){
                        //Prevent the form from submitting normally
                        e.preventDefault();
                       $("#registerform").validate({ 
                            rules: { 
                              firstname: "required",// simple rule, converted to {required:true} 
                              surname: "required",
                              //phonenumber: "required",
                              address: "required",
                             // address2: "required",
                              zipcode: "required",
                              username_ID: "required",
                              city: "required",
                              panyname: "required",
                              email: {// pound rule 
                              required: true, 
                              email: true 
                            }              
                            }, 
                            messages: { 
                              firstname: "Förnamn saknas" ,
                              surname: "Efternamn saknas",
                              address: "Adress saknas",
                             // address2: "required",
                              zipcode: "Postkod saknas",
                              username_ID: "Användarnamn saknas",
                              city: "Ort saknas",
                              panyname: "Företagsnamn saknas",
                              email: "Korrekt emailadress saknas"                             
                            } 
                          }); 
                        //alert("e");
                    $.post("registeraccount.php",$(this).serialize(),function(msg){
                    //alert the response from the server
                    //alert(msg);
            });
    });

My form:

<form id='registerform' action='registeraccount.php' method='post'> 
            Ägare av konto</br>
            * Förnamn: <input type='text' name='firstname' /> <br/>
            * Efternamn: <input type='text' name='surname' /> <br/>
            * Email: <input type='text' name='email' /> <br/>
            * Telefon: <input type='text' name='phonenumber' /> <br/>
            Företagsinformation: </br>
            * Adress: <input type='text' name='address' /> <br/>
            Adress: <input type='text' name='address2' /> <br/>
            * Postnummer: <input type='text' name='zipcode' /> <br/>
            * Ort: <input type='text' name='city' /> <br/>

            <br/>
            Kontoinformation</br> 
            <div id='username_message'></div>
            * Användarnamn: <input id='username_ID' type='text' name='username' />

            <br/>
            Företagsinformation<br/>
            * Företagsnamn (som kunden kommer se det): <input type='text' name='panyname' /> <br/>
            Organisationsnummer: <input type='text' name='organisationnumber' /><br/>
            <input id='submitaccountregistration' type='submit' value='Submit Comment' /> 
        </form>

How e it's not triggered on the first submit and how can I get the validation to be performed the first time I hit submit?

I am trying to validate a form. The form is dynamically generated and added to div on the page. When submitting the form I want the validation to be performed at once. What happens now is that the first time I submit the form is posted without being validated. The second time I hit submit it's validate.

Here is my script:

$("#registerform").live("submit", function(e){
                        //Prevent the form from submitting normally
                        e.preventDefault();
                       $("#registerform").validate({ 
                            rules: { 
                              firstname: "required",// simple rule, converted to {required:true} 
                              surname: "required",
                              //phonenumber: "required",
                              address: "required",
                             // address2: "required",
                              zipcode: "required",
                              username_ID: "required",
                              city: "required",
                              panyname: "required",
                              email: {// pound rule 
                              required: true, 
                              email: true 
                            }              
                            }, 
                            messages: { 
                              firstname: "Förnamn saknas" ,
                              surname: "Efternamn saknas",
                              address: "Adress saknas",
                             // address2: "required",
                              zipcode: "Postkod saknas",
                              username_ID: "Användarnamn saknas",
                              city: "Ort saknas",
                              panyname: "Företagsnamn saknas",
                              email: "Korrekt emailadress saknas"                             
                            } 
                          }); 
                        //alert("e");
                    $.post("registeraccount.php",$(this).serialize(),function(msg){
                    //alert the response from the server
                    //alert(msg);
            });
    });

My form:

<form id='registerform' action='registeraccount.php' method='post'> 
            Ägare av konto</br>
            * Förnamn: <input type='text' name='firstname' /> <br/>
            * Efternamn: <input type='text' name='surname' /> <br/>
            * Email: <input type='text' name='email' /> <br/>
            * Telefon: <input type='text' name='phonenumber' /> <br/>
            Företagsinformation: </br>
            * Adress: <input type='text' name='address' /> <br/>
            Adress: <input type='text' name='address2' /> <br/>
            * Postnummer: <input type='text' name='zipcode' /> <br/>
            * Ort: <input type='text' name='city' /> <br/>

            <br/>
            Kontoinformation</br> 
            <div id='username_message'></div>
            * Användarnamn: <input id='username_ID' type='text' name='username' />

            <br/>
            Företagsinformation<br/>
            * Företagsnamn (som kunden kommer se det): <input type='text' name='panyname' /> <br/>
            Organisationsnummer: <input type='text' name='organisationnumber' /><br/>
            <input id='submitaccountregistration' type='submit' value='Submit Comment' /> 
        </form>

How e it's not triggered on the first submit and how can I get the validation to be performed the first time I hit submit?

• javascript
• jquery
• html
• dom
• jquery-validate

Share Improve this question Follow asked Aug 6, 2011 at 9:23 NicsoftNicsoft 3,72299 gold badges4343 silver badges7171 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

At first submit event you are not validating form, but just attaching validator plugin to it. At second submit you are validating it and attaching validation again.

Just define function which adds your validation (function attachValidate(form) { $(form).validate... }) and run this function when form is generated/loaded.

I'm not sure, but i think you should call

$("#registerform").validate({ 
                            rules: { 
                              firstname: "required",// simple rule, converted to {required:true} 
                              surname: "required",
                              //phonenumber: "required",
                              address: "required",
                             // address2: "required",
                              zipcode: "required",
                              username_ID: "required",
                              city: "required",
                              panyname: "required",
                              email: {// pound rule 
                              required: true, 
                              email: true 
                            }              
                            }, 
                            messages: { 
                              firstname: "Förnamn saknas" ,
                              surname: "Efternamn saknas",
                              address: "Adress saknas",
                             // address2: "required",
                              zipcode: "Postkod saknas",
                              username_ID: "Användarnamn saknas",
                              city: "Ort saknas",
                              panyname: "Företagsnamn saknas",
                              email: "Korrekt emailadress saknas"                             
                            } 
                          }); 

outside of the click function (of course put it after you added the form to the DOM) so that you attach validation to the form before it's submitted. In your case it seems that the first time you click you set up the validation, which takes effects the second time you click.

did you using "pjax", if so you have to place validation code at "pjax:end" block

<script>
$(document).on('pjax:end', function () {
   $('#csv_form').validate();
});
</script>