Question

I’m using the ajax form plugin and that is the way how I handle my forms. Now I decided to add a beautiful plugin – validationengine. But I don’t know how to integrate it. The code I have:

        $("#addCompanyForm").validationEngine({scroll:false});
        $("#addCompanyForm").ajaxForm({
            beforeSubmit: function() {
                valid = $("#addCompanyForm").validationEngine('validate');
                if (valid == false) return false;
                //some actions like blocking interface (show loader) etc
            },
            url: myURL,
            success: function() {
                //some actions like unblocking interface etc
            }
        });

Well, I have an inline validation and when I push the submit button it submits data and after that again validate the inline input (and probably all others too). What I want to have: when I blur inputs I need to have validation (including ajax inline) and when I submit I need validation.

And also I don’t clearly understand the scheme. For example I have a form with lots of inputs. When I push the submit button the validationengine have to check the inputs and after that I send data to my php script, which have to check them again? (In case we’re dealing with hack attempt). And if data is not valid for example we can just use something like

Thanks in advance, I would really appreciate any help

Answer 1

After looking for a while for a solution for my exact problem, found it.

<script>
    $(function() { 
        var options = { 
            target:        '#save',
            dataType:      'json',
            beforeSubmit:  showRequest,
            success:       showResponse
        }; 
        $('#form').validationEngine({scroll:false});
        $('#form').ajaxForm(options);

    });

    function showRequest(formData, jqForm, options) { 
        var valid = $("#form").validationEngine('validate');
        if (valid == true) {
            $("#save").fadeIn().html('<p class="message loading">Saving...</p>');
            return true;
        }else{
            return false;
        }
    } 

    function showResponse(data, responseText, statusText)  { 
        $("#save").fadeOut().html('<p class="message success">Saved.</p>');
    } 
</script>