jqueryjquery-stepserrorplacement

Override default jquery-steps error message


I'm sure I'm just overlooking something simple...but I want to display a text error message next to the invalid input item (such as a text box) in the jQuery-steps form validation. Code base on Jquery-steps, here.

From what I've been reading this should do the trick:

<script>
    $(function ()
    {

/*            function errorPlacement(error, element)
        {
            element.before(error);
        }*/

        $("#form").validate({
            rules: {
                zip: {
                    required: true,
                    digits:true,
                    maxlength:5,
                    minlength:5
                    },
                messages: {
                    zip: "entr da zip dode"
                    }
            }
        });

        $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex)
            {
                // Allways allow step back to the previous step even if the current step is not valid!
                if (currentIndex > newIndex)
                {
                    return true;
                }

              $("#form").validate().settings.ignore = ":disabled,:hidden";
                return $("#form").valid();

            },
            onFinishing: function (event, currentIndex)
            {
                $("#form").validate().settings.ignore = ":disabled";
                return $("#form").valid();
            },
            onFinished: function (event, currentIndex)
            {
                alert("Thank you! Your request has been sumbitted.");
            }
        });
    });

    //PHONE NUMBER MASKING FUNCTION     
    jQuery(function($){
       $("#phone").mask("999-999-9999",{placeholder:" "});
    });

But the validation simply ignores this and just adds 'class="error"' to the invalid items, but not appending a label or div (etc) to display the messages.

What did I miss?


Solution

  • Set up your rules and your messages as two separate objects. Try this instead (you can uncomment the min/max messages to see how they work):

    $('#form').validate({
      rules: {
        zip: {
          required: true,
          digits: true,
          minlength: 5,
          maxlength: 5
        }
      },
      messages: {
        zip: {
          //minlength: jQuery.format("Zip must be {0} digits in length"),
          //maxlength: jQuery.format("Please use a {0} digit zip code"),
          required: "entr da zip dode"
        }
      }
    });