如何显示跨度内的jquery验证错误消息 [英] how to display jquery validation error message inside a span

问题描述

我具有以下脚本来验证我的表单.它工作正常，但我试图在<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=""  />

解决方案

我将使用showErrors选项来完成此操作:

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

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

注释:

• 使用 $.map 来基于errorList建立错误消息数组参数传递给函数.
• 然后使用 .join(", ") 来加入上述数组变成一个字符串.
• 使用 html 将内容放置在类errormsg中的元素内. li>

I have the following script to validate my form. It is working fine but I am trying to show all the validation error messages inside <span class="errormsg"></span> separated by comma instead of displaying them all individually beside each input.

I have very little knowledge in jquery; I don't know how to achieve this. Could you please show me?

Thanks :)

<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>

My Form

<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=""  />

解决方案

I would use the showErrors option to accomplish this:

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

Example: http://jsfiddle.net/bd3zM/

Notes:

• Uses $.map to build up an array of error messages based on the errorList argument passed to the function.
• Then uses .join(", ") to join the above array into one string.
• Places the content inside element(s) with class errormsg using html.

这篇关于如何显示跨度内的jquery验证错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！