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

Question

我使用Jquery validation plug-in验证下面这两个输入元素。 当输入无效时，插件会在输入字段后生成一个标签标记，例如:<label for="company" style="">Required !</label>

问题:如何将错误消息放入已存在的 <span class="help-inline"> 中而不是生成新的 <label> ？

非常感谢您提前提供的帮助。

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

Answer 1

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

• 使用errorElement更改 <label>进入<span> .

• 使用errorClass将默认错误类别更改为 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>

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

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