CODEWITHSUNDEEP
jqueryjquery-validate
Ray C Lin
Ray C Lin

Reputation: 703

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

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>

Upvotes: 7

Views: 24728

Answers (1)

Sparky
Sparky

Reputation: 98718

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.

Upvotes: 20

Related Questions