CODEWITHSUNDEEP
javascriptjqueryhtml
Odyss3us
Odyss3us

Reputation: 6635

jQuery form validation check returns 'undefined'

I am having some trouble with a form I am trying to submit using jquery $.post, I am using this validation plugin to validate the form, but when I try to check the form with $("#form").validationEngine('validate') I constantly get undefined and then the page reloads, here is the code:

$(document).ready(function() {          

        $("#form").validationEngine();

        $("#submit").live('click',function(){
            var valid = $("#form").validationEngine('validate');
            var vars = $("#form").serialize();

            if(valid == true){

                //disable submit button
                $("#submit").attr('disabled','disabled');

                $.post('thank_you.php',vars,function(data){
                    alert(data);
                });

            }else{
                $("#form").validationEngine();
            }
        });
});

the HTML:

<form id="form">
    <div>
        <label for='province'>Select your current province </label>
        <select id='province' name='province' class='validate[required] text-input'>
            <option value=''>Select one</option>
            <option>province1</option>
            <option>province2</option>
        </select>
    </div>
    <br />
    <div>
        <label for="city">Select your current city</label><br />
        <select id="city" name="city" class="validate[required] text-input">
            <option value="">Select one</option>
            <option>city1</option>
            <option>city2</option>
        </select>
    </div>
    <br />
    <div>
        <label for="name_surname">Name & Surname</label><br />
        <input type="text" id="name_surname" name="name_surname" class="validate[required] text-input" />
    </div>
    <br />
    <div>
        <label for="email">Email Address</label><br />
        <input type="text" id="email" name="email" class="validate[required,custom[email]] text-input" />
    </div>
    <div>
        <input type="image" src="images/solar_38.gif" width="82" height="32" alt"submit" id="submit" />
    </div>
</form>

I have had a look on the plugin's site, and have found nothing that could indicate why I am getting this, is there anything in my code that could be causing me to get undefined when I try to validate the form?

Upvotes: 2

Views: 7345

Answers (2)

Clyde Lobo
Clyde Lobo

Reputation: 9174

I tried creating at a demo and ran into the same error as you. Only when i included both the below js , did it start working. May be its the same in your case :)

<script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine-en.js"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js"></script>

Upvotes: 2

Mark Robinson
Mark Robinson

Reputation: 13278

Looking at the documentation I think the $("#form").validationEngine(); line is wrong - should it be 

$("#form").validationEngine('attach');

From the documentation:

Instantiation The validator is typically instantiated by using a call of the following form:

$("#form.id").validationEngine(action or options);

The method takes one or several optional parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.

Here comes a glimpse: say you have a form is this kind

The following code would instance the validation engine:

 <script> 
 $(document).ready(function(){ 
     $("#formID").validationEngine('attach');

    }); 
 </script>

Upvotes: 1

Related Questions