how to display jquery validation error message inside a span

Question

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

Andrew Whitaker · Accepted Answer · 2012-05-28 18:08:45Z

13

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.

answered May 28, 2012 at 18:08

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

black_belt Over a year ago

You're genius :). I have searched a lot on google before posting this question but didn't find anything. Thanks a lot man for the Notes. :)

Collectives™ on Stack Overflow

how to display jquery validation error message inside a span

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related