Jquery 验证，将错误信息放在现有元素中，而不是生成 <label> 标签

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

提问by Ray C Lin

I use Jquery validation plug-into 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>

下面我使用jquery验证插件来验证这两个输入元素。当输入无效时，插件会在输入字段后立即生成一个标签标签，例如：<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>?

问题：如何将错误消息放入已存在的<span class="help-inline">而不是生成新的<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>

回答by Sparky

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

利用内置选项并让插件创建您的span元素会更容易。生成的 HTML 的最终结果将是您所请求的。

• Use errorElementto change the <label>into a <span>.

• Use errorClassto change the default error class into help-inline

• 用于errorElement将 更改<label>为<span>.

• 用于errorClass将默认错误类更改为help-inline

jQuery:

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:

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/

演示：http: //jsfiddle.net/eRZFp/

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

顺便说一句：您的User Name字段缺少name属性name="username". 为了让这个插件正常工作，所有输入元素都必须包含一个唯一的name属性。