how to submit form only if validation is success

问题

i try to validate the form before submitting the request. i am using jquery validation

i am expecting when page finish load, the form will auto submit, and i will see "Loading" in the div. but nothing happen here is my code. but seems it is not working..

<script type="text/javascript">

    function submitForm() {
        $('#SearchForm').validate({
            errorLabelContainer: "#ErrorLabel",
            rules: {
                instrument: {
                    required: true,
                    maxlength: 10
                }
            },
            messages: {
                maxlength: "Must no longer than 10 characters",
                required: "Must not be empty"
            },

            submitHandler: function () { $('#SearchForm').submit(); }
        });
    }

    $(document).ready(function () {
        $('#SearchForm').submit(function () {
            $('#DivToUpdate').text('Loading ...');
        });
        submitForm();
    });
</script>

回答1:

Made a small Working demo http://jsfiddle.net/CRfuZ/

2 things: try putting invalidHandler and pass form to the submitHandler

In the demo above if you will enter more then maxlenght 10 the halbert in invalidHandler will capture it.

Rest feel free to play around with the demo.

This will help hopefully :)

link: http://docs.jquery.com/Plugins/Validation/validate

COde

jQuery(function($) {
    $("#form").validate({
        debug: false,
        focusInvalid: false,
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        rules: {
            instrument: {
                required: true,
                maxlength: 10
            },
        },
        messages: {
            maxlength: "Must no longer than 10 characters",
            required: "Must not be empty"
        },
        success: function(label) {
            alert('succes:' + label);
        },
        submitHandler: function(form) {
            alert('start submitHandler');
            postContent('test');
            alert('end submitHandler');
        },
        invalidHandler: function(form, validator) {
            alert('invalidHandler');
        },
    });
});


function postContent(postData) {
    alert('postcontent: ' + postData);

}

回答2:

Using code written below may solve your problem ...

<script type="text/javascript">
    jQuery(function ( $ ) {
            var $theForm = $( 'form' );
        $( '#DivToUpdate' ).text( 'Loading ...' );
        $theForm.validate({
            rules: {
                instrument : {
                    required: true,
                    maxlength: 10
                }
            }, messages: {
                maxlength : "Must no longer than 10 characters",
                required : "Must not be empty"
            }
        });
        if( $theForm.valid() ) {
            $theForm.submit(); //submitting the form
        }
    });
</script>

You're not supposed to use submitHandler generally ...

Added: Running example at jsfiddle.

来源：https://stackoverflow.com/questions/10959728/how-to-submit-form-only-if-validation-is-success

标签

jquery

html

jquery-validate