Question

As soon as I insert errorPlacement: function, it breaks the code. No validation happens on click of submit. can someone help please.

If I remove this function, validation works fine.

Imports:-

<script type="text/javascript" src="/MyApp/js/jquery.js"></script>
<script type="text/javascript" src="/MyApp/js/jquery.validate.min.js"></script>

Script:-

    $(document).ready(function(){
        $("#post-an-ad").validate({
            rules:{
                articleTitle:{
                    required: true,
                    minlength: 5
                },            
                dateRequested:{
                   required: true,
                    date: true
                },
                articleLocation:{
                    required: true,
                    minlength: 8
                },
                'user.agent': "required",
                'user.firstName': "required",
                'user.emailId':{
                    required: true,
                    email: true
                },
                'user.phone':{
                    required: true,
                    minlength: 8,
                    number: true
                }
            },
             errorPlacement: function(error, element) {
             alert("This alert is not popping");
             },
            submitHandler: function(form){      
            // doing nothing on a submit.
                return false;
            }
        });
    });

Answer 1

I put your code into a jsFiddle and it crashed my browser. Your Validation code is fine… however, putting an alert() inside the errorPlacement: function is not!

errorPlacement: function(error, element) {
    alert("This alert is not popping");  //--- this is causing infinite loop
},

Alert is triggered on error, then when you hit “ok” on alert it’s re-triggered immediately since the form is still invalid, the process repeats… this gets stuck in infinite loop of non-stop alerts. It crashed my Safari because I could not dismiss alert without next alert popping back immediately. I’m sure other browsers are handling this loop in their own way.

Everything else is working fine.

Un-comment the offending lines at your own risk:

http://jsfiddle.net/59bsp/

---

This is the solution where errorPlacement: works perfectly fine…

errorPlacement: function(error, element) {
    error.insertAfter(element);  //- this line demonstrates the default behavior
},

http://jsfiddle.net/59bsp/1/