如何在span中显示jquery验证错误消息

时间:2012-05-28 17:53:01

标签: jquery jquery-validate

我有以下脚本来验证我的表单。它运行正常,但我试图在<span class="errormsg"></span>内显示所有以逗号分隔的验证错误消息,而不是在每个输入旁边单独显示它们。

我对jquery知之甚少;我不知道如何实现这一目标。你能告诉我吗?

谢谢:)

<script>
  $(document).ready(function() { 
    // validate signup form on keyup and submit 
    var validator = $("#signupform").validate({
      rules: {
  customerid: "required",
  date: "required",
  invoiceid: {
    required: true,
    minlength: 2,
    remote: "<? echo base_url();?>mycontroller/function" }
  },
      messages: {
    customerid: "Enter your customerid",
    date: "Enter your date",
    invoiceid: {
       required: "Enter a invoiceid",
       minlength: jQuery.format("Enter at least {0} characters"),
       remote: jQuery.format("{0} is already in use")
    },
      }
    });
  });
</script>

我的表格

<label>Invoice #</label>
<input type="text" name="invoiceid" id="invoiceid" value="" />

<label  style="margin-left:20px;">Date</label>
<input type="text" id="datepicker1" name="date" value=""  />

<label  style="margin-left:20px;">Customer</label>
<input type="text" id="customerid" name="customerid" value=""  />

1 个答案:

答案 0 :(得分:13)

我会使用showErrors选项来完成此任务:

showErrors: function(errorMap, errorList) {
    $(".errormsg").html($.map(errorList, function (el) {
        return el.message;
    }).join(", "));
},

示例: http://jsfiddle.net/bd3zM/

备注:

  • 使用$.map根据传递给函数的errorList参数构建一组错误消息。
  • 然后使用.join(", ")将上述数组连接成一个字符串。
  • 使用html将内容放置在具有errormsg类的元素内。