Home/ Questions/Q 9206757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:14:35+00:00

I’ve spent hours on this and I have no idea why this jquery validate()

  • 0

I’ve spent hours on this and I have no idea why this jquery validate() doesn’t work. I finally broke it down to minimum and it still doesn’t work. This is the actuall code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>

    <script>

        $(document).on("click", "#submit", function() {

            $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

            return false;
         });

    </script>

</head>
<body>

    <form id="form">
        <input type="text" value="" name="input" id="input" />
    </form>
    <a href="#" id="submit">submit</a>

</body>
</html>

Am I missing something obvious here? I get no errors and nothing happens when “submit” is clicked.

UPDATE: I have moved the validate() outside the “click” event into document “ready” event and now it fires off when the document is loaded outputting message in the console “nothing selected, can’t validate, returning nothing”
This is not how I want it to work obviously, so how do I attach it to the click event?

UPDATE 2: Thanks to @NXT i finally make the validation run, however “submitHandler” is still not working and I need to use it to make Ajax call, because the form must be submitted without a page reload.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Did you intentionally put the submit button outside the form? I modified it, to submit the form when clicked.
    It works now – the validation message appears, and the alert message too (when you submit the form with some content). Either use the code parts below, or try it online – http://jsfiddle.net/Vcmfs/

    Head:

    <script>
    $(function(){
        $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

        $("#submit").click(function(){
            $("#form").submit();
            return false;
        });
    });
</script>

    Body:

    <form id="form">
    <input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>
    • 0