CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Michael Falciglia
Michael Falciglia

Reputation: 1046

Jquery Validation Unvalidated form submit button able to be clicked (With Fiddle)

I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.

This causes the hidden loading image to show even though the form is no being submitted.

Here is a fiddle with the loader and script http://jsfiddle.net/mikeef74/gzSDH/16/

var submit_hit = false;

$(document).ready(function () {
    $('#iframe1').on('load', function () {
        $('#loader1').hide();
        if (submit_hit) {
            $('#form_container').hide();
            $('#mydivhide1, #mydivhide2').show();
            $('body').css("background-image", "url(images/previewbg7.jpg)");
            $('body').css("overflow-y", "auto");
        }
    }
});

$("#form_710370").validate();
$('#form_710370').submit(function (e) {
    $('#loader1').show();
        submit_hit = true;
        return true;
    });
});

Upvotes: 2

Views: 479

Answers (2)

Jasen
Jasen

Reputation: 14250

The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.

Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.

$("#form_710370").validate({
    submitHandler: function(form) {
        $("#loader1").show();
        submit_hit = true;
        form.submit();
    }
});

// remove this
//$('#form_710370').submit(function (e) { ... }

http://jqueryvalidation.org/documentation/

Upvotes: 1

Mr.G
Mr.G

Reputation: 3569

This is way validate a form in jquery: 

 $(function() {
            $("#form_710370").validate({
                rules: {
                          //
                       },
                messages: {
                       //
                       },
        submitHandler: function(form) {
                    form.submit();
                }
            });
        });

Upvotes: 0

Related Questions