覆盖默认的jquery-steps错误消息

时间:2014-06-30 19:55:06

标签: jquery jquery-steps errorplacement

我确定我只是忽略了一些简单的东西...但是我想在jQuery-steps表单验证中的无效输入项(例如文本框)旁边显示一条文本错误消息。代码基于Jquery-steps,here

从我读过的内容来看,这应该可以解决问题:

<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:" "});
    });

但验证只是忽略了这一点,只是将'class =“error”'添加到无效项目中,但不附加标签或div(等)来显示消息。

我错过了什么?

1 个答案:

答案 0 :(得分:0)

将规则和消息设置为两个单独的对象。试试这个(你可以取消注释最小/最大消息,看看它们是如何工作的):

$('#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"
    }
  }
});