Jquery validation, put error message in an existing element instead of generating a <label> tag

Question

I use Jquery validation plug-in to validate these two input elements below. When an input is invalid the plug-in will generate a label tag right after the input field, such as: <label for="company" style="">Required !</label>

Question: How do I put the error message in the existed <span class="help-inline"> instead of generating a new <label> ?

Many thanks for your help in advance.

<script type="text/javascript">

 $('#signUpForm').validate({
                            debug: false,
                            rules: {company:"required",username:"required"},
                         messages: {company:"Required !",username:"Required !"}
                          })// End of validate()

</script>


<div class="control-group">
   <label class="control-label" for="company">Company Name</label>
   <div class="controls">
      <input type="text" name="company">
      <label for="company">Required !</label> // -> this line is generated by Plug-In.
      <span class="help-inline">(required)</span>
   </div>
</div>

<div class="control-group">
   <label class="control-label" for="username">User Name</label>
   <div class="controls">
      <input type="text" name="username">
      <span class="help-inline">(required)</span>
   </div>
</div>

Sparky · Accepted Answer · 2013-06-10 17:37:41Z

20

It would be easier to leverage the built in options and let the plugin create your span elements. The end result of the generated HTML will be what you're requesting.

Use errorElement to change the <label> into a <span>.
Use errorClass to change the default error class into help-inline

jQuery:

$(document).ready(function () {

    $('#signUpForm').validate({ // initialize the plugin
        errorElement: 'span',
        errorClass: 'help-inline',
        rules: {
            company: "required",
            username: "required"
        },
        messages: {
            company: "Required !",
            username: "Required !"
        }
    });

});

HTML:

<form id="signUpForm">
    <div class="control-group">
        <label class="control-label" for="inputCompanyName">Company Name</label>
        <div class="controls">
            <input name="company" type="text" id="inputCompanyName" placeholder="" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputFirst">User Name</label>
        <div class="controls">
            <input name="username" type="text" id="username" placeholder="" />
        </div>
    </div>
    <input type="submit" />
</form>

DEMO: http://jsfiddle.net/eRZFp/

BTW: Your User Name field was missing the name attribute, name="username". For this plugin to work properly, all input elements must contain a unique name attribute.

answered Jun 10, 2013 at 17:37

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

1 Comment

Ray C Lin Over a year ago

Hi Sparky, Thanks for the answer, it just works the way I wanted, and the demo link is BRILLIANT !!

Collectives™ on Stack Overflow

Jquery validation, put error message in an existing element instead of generating a <label> tag

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related