CODEWITHSUNDEEP
jqueryhtmljquery-validate
jojo
jojo

Reputation: 13843

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>

ll

Upvotes: 3

Views: 18640

Answers (2)

rashid2538
rashid2538

Reputation: 809

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.

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

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);

}


​

Upvotes: 4

Related Questions