Only fire the validation with the submit button

Question

I'm using a button for my file upload. If I press it, it starts validating. How can I only fire validating, if I'm pressing the submit Button?

Html Formular

<form id="form_import"method="post" enctype="multipart/form-data">  

<button>Choose File</button><span id="filename">no file chosen.</span>
<input type="file" name="file"/>
<input type="submit">

</form>

Javascript

$(document).ready(function() {
$("button").click(function() {
    $("input[type='file']").click();
})
});

$(document).ready(function() {
$("input[type='file']").change(function() {
    var filename = $("input[type='file']").val().split('\\').pop();
    $("#filename").html(filename);
})
});

$(document).ready(function() {
$("input[type='submit']").click(function() {
    $("[id^=form]").validate({
        submitHandler: function(form) {
            form.submit();
        }
    })
})
});

$(document).ready(function() {
$("#form_import").validate({
    rules: {
        "file": {
            required: true
        }
    }
})
});

css

input[type=file] {
visibility: hidden;
}

Show the relevant JavaScript code including the _complete relevant_ markup for your form. Are you really using the jQuery Validate plugin as indicated by your tag? If so, by default, there is no validation until the submit button is pressed. In other words, it works that way already. — Sparky, Feb 12 '14 at 22:08
The event has to occur later, How can I do this? It alredy occurs, when I press the button and it this moment, there is no file selected. — Jayni, Feb 12 '14 at 22:54
You misunderstand the purpose of the `.validate()` method. It's only used for _initializing_ the plugin, not testing the form. The testing is done automatically once properly initialized. — Sparky, Feb 12 '14 at 23:16

score 0 · Answer 1 · edited May 23 '17 at 12:20

You are using the plugin incorrectly, along with some other unusual things.

1) You do not need a separate DOM ready event handler, $(document).ready(function(){...}), for every block of code. They can all be contained within one instance.

2) You cannot call .validate() more than once. The .validate() method is only used to initialize the plugin on your form... nothing else. Calling it subsequent times will have no effect.

3) You should not put .validate() inside of a click handler. Since you're already calling it within a DOM ready handler, this second instance will be ignored anyway.

4) You are putting form.submit() inside of the submitHandler callback function. This is totally superfluous since that's already the default behavior of the plugin. If that's really the only code you have in your submitHandler, then you can remove the entire submitHandler function. It's also ignored due to reason #3 above.

5) If you want the jQuery Validate plugin to not treat your <button> like a submit, then use the type="button attribute.

<button type="button">Choose File</button>

6) Since your input type="file" element is hidden, you must tell the jQuery Validate plugin to not ignore hidden elements through its ignore option. Setting this option to [] is enough.

$("#form_import").validate({
    ignore: [],  // <- don't ignore hidden elements
    rules: {
        "file": {
            required: true
        }
    },
    // all other rules, options, or callback functions
})

@user3290347, If my answer helped you solve your problem, then please "accept" it or vote it up... under no circumstances should you make edits that wipe it all out and replace with a thanks message. That is counter-productive to this site. Thank-you. — Sparky, Feb 13 '14 at 00:07

Only fire the validation with the submit button

1 Answers1