引导JQuery验证：输入和<；之间的错误消息；span class="；“附加组件”&燃气轮机；

当结合使用Twitter引导和Jquery验证时，除了使用带有（图标）插件的字段外，一切正常，如：

<label>Datum:</label>
<div id="datum" class="input-append">
   <input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
   <span class="add-on">
      <i data-date-icon="icon-calendar"></i>
   </span>
</div>

编辑

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        { onkeyup: false
            //form validation rules


            // LOGIN FORM
            $("#loginform").validate({        
                onkeyup: false,
                 rules: {
                    gebruikersnaam: {
                        required: true           
                    },
                    wachtwoord: {
                        onkeyup: false,
                        required: true,
                        minlength: 5,
                    }
                },
                messages: {
                    gebruikersnaam: {
                        required: "Vul aub een gebruikersnaam in."                      
                    },
                    wachtwoord: {
                        required: "Vul aub een wachtwoord in.",
                        minlength: "Wachtwoord moet minimaal 5 tekens langs zijn.",
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            // NIEUWE DISTRIBUTIE OPDRACHT


    $("#distributieopdracht").validate({  

        onkeyup: false,
         rules: {
            opdrachtgever: {
                required: false                
            },
            datum: {
                required: true
            },
            frequentie: {
                required: true
            },
            actie: {
                required: true
            },
            product: {
                required: false
            },
            aantal: {
                required: false,
                digits: true
            },
            koeling: {
                required: true
            },
            tarief: {
                required: false,
                decimal: true
            },
            naam: {
                required: false,
                naam: true
            },
            adres: {
                required: false
            },
            plaats: {
                required: false
            },
            telefoonnnummer: {
                required: false,
                telefoon: true
            },
            opmerkingen: {
                required: false
            },
        },
        messages: {
            datum: {
                required: "Datum is verplicht."
            },
            frequentie: {
                required: "Frequentie is verplicht."
            },
            actie: {
                required: "Keuze is verplicht."
            },
            aantal: {
                digits: "Alleen getallen."
            },
            koeling: {
                required: "Keuze is verplicht."
            },
            tarief: {
                decimal: "Vul een geldig tarief in."
            },
            naam: {
                naam: "Vul een geldige naam in."
            },
            telefoonnnummer: {
                telefoon: "Vul een geldig telefoonnummer in."
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

$(document).ready(function () {

       $("#loginform").validate({        
        onkeyup: false,
            rules: {
               gebruikersnaam: {
                   required: true           
               },
               wachtwoord: {
                onkeyup: false,
                   required: true,
                   minlength: 5,
               }
           },
           messages: {
               gebruikersnaam: {
                required: "Vul aub een gebruikersnaam in."                      
               },
               wachtwoord: {
                   required: "Vul aub een wachtwoord in.",
                   minlength: "Wachtwoord moet minimaal 5 tekens langs zijn.",
               },
           },

       });


      $("#distributieopdracht").validate({  
            onkeyup: false,
             rules: {
                opdrachtgever: {
                    required: false                
                },
                datum: {
                    required: true
                },
                frequentie: {
                    required: true
                },
                actie: {
                    required: true
                },
                product: {
                    required: false
                },
                aantal: {
                    required: false,
                    digits: true
                },
                koeling: {
                    required: true
                },
                tarief: {
                    required: false,
                    decimal: true
                },
                naam: {
                    required: false,
                    naam: true
                },
                adres: {
                    required: false
                },
                plaats: {
                    required: false
                },
                telefoonnnummer: {
                    required: false,
                    telefoon: true
                },
                opmerkingen: {
                    required: false
                },
            },
            messages: {
                datum: {
                    required: "Datum is verplicht."
                },
                frequentie: {
                    required: "Frequentie is verplicht."
                },
                actie: {
                    required: "Keuze is verplicht."
                },
                aantal: {
                    digits: "Alleen getallen."
                },
                koeling: {
                    required: "Keuze is verplicht."
                },
                tarief: {
                    decimal: "Vul een geldig tarief in."
                },
                naam: {
                    naam: "Vul een geldige naam in."
                },
                telefoonnnummer: {
                    telefoon: "Vul een geldig telefoonnummer in."
                }
            },
            errorPlacement: function(error, element) {
                if (element.next().is('.add-on')) {
                    error.addClass('add-on').insertAfter(element.next('.add-on'));
                } else {
                    error.insertAfter(element);
                }
                error.append(element.parent());
           });
    });

});

errorPlacement: function (error, element) {
                if (element.next().is('.add-on')) {
                    error.insertAfter(element.next('.add-on'));
                } else {
                    error.insertAfter(element);
                }
                element.parent().insertAfter(error);
            }

表格

<div id="distributie" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="distributieLabel" aria-hidden="true">
    <form class="modal-form" action="submit.php" data-remote="true" method="post" id="distributieopdracht">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="distributieLabel">Nieuwe Distributie Opdracht</h3>
        </div>
        <div class="modal-body">

            <label>Opdrachtgever:</label> 
                <input type="text" name="opdrachtgever" placeholder="Typ hier de opdrachtgever..." /><br /> 

            <label>Datum:</label>
                <div id="datum" class="input-append">
                    <input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
                    <span class="add-on"><i data-date-icon="icon-calendar"></i></span>
                </div>

            <label>Frequentie:</label> 
                <select name="frequentie">
                    <option value="">Kies een frequentie...</option>
                    <option value="eenmalig">Eenmalig</option>
                    <option value="dagelijks">Dagelijks</option>
                    <option value="wekelijks">Wekelijks</option>
                    <option value="tweewekelijks">Twee-wekelijks</option>
                    <option value="maandelijks">Maandelijks</option>
                    <option value="jaarlijks">Jaarlijks</option>
                </select><br /> 

            <label>Actie:</label>
                <select name="actie">
                    <option value="">Kies een actie...</option>
                    <option value="ophalen">Ophalen</option>
                    <option value="afleveren">Afleveren</option>
                </select><br /> 

            <label>Product:</label> 
                <input type="text" name="product" placeholder="Typ hier een product..." /><br /> 

            <label>Aantal colli:</label>
                <input type="text" name="aantal" placeholder="Typ hier het aantal..." /><br />

            <label>Koeling:</label> 
                <select name="koeling">
                    <option value="">Kies een optie...</option>
                    <option value="ja">Ja</option>
                    <option value="nee">Nee</option>
                    </select><br />

            <label>Tarief:</label>
                <input type="text" name="tarief" placeholder="Typ hier een tarief..." /><br />

            <label>Naam:</label>
                 <input type="text" name="naam" placeholder="Typ hier een naam..." /><br /> 

            <label>Adres:</label>
                <input type="text" name="adres" placeholder="Typ hier het adres..." /><br />

            <label>Plaats:</label>
                <input type="text" name="plaats" placeholder="Typ hier de plaats..." /><br />

            <label>Telefoonnummer:</label>
                <input type="text" name="telefoonnummer" placeholder="Typ hier het telefoonnummer..." /><br />

            <label>Opmerkingen:</label>
                <textarea rows="3" name="opmerkingen" placeholder="Typ hier eventuele opmerkingen..."></textarea>
    </div>
    <div class="modal-footer">
        <input type="submit" value="Invoeren" class="btn btn-primary" /> 
        <a href="#" class="btn" data-dismiss="modal">Annuleren</a>
    </div>
  </form>
</div>

工作方案由@jani Hyytainen编写：

errorPlacement : function(error, element) {
        if (element.next().is('.add-on')) {
             error.insertAfter(element.parent());
        } 
        else {
             error.insertAfter(element);
        }
}

---

看看这里的errorPlacement选项

您还可以测试是否存在加载项，更改错误消息的位置，将其样式设置为与加载项类似，等等：

$("#myform").validate({
    errorPlacement: function(error, element) {
        if (element.next().is('.add-on')) {
            error.addClass('add-on').insertAfter(element.next('.add-on'));
        } else {
            error.insertAfter(element);
        }
    }
});

它看起来是这样的：

<label>Datum:</label>
<div id="datum" class="input-append">
   <input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
   <label for="datum" generated="true" class="error" style="">Datum is verplicht.</label>
   <span class="add-on">
      <i data-date-icon="icon-calendar"></i>
   </span>
</div>

---

抱歉，日历没有图标，但它是输入后的正方形。

我在引导程序3中遇到了日期选择器验证问题
为了解决这个问题，我检查了元素是否是日期选择器，然后在元素的父组之外显示错误，否则执行默认操作

这是最后的代码

errorPlacement: function(error, element) { 
    if ($(element).hasClass("date-picker") ) {
        error.insertAfter($(element).closest('.input-group'));
    }
    else
    {
        error.insertAfter(element);
    }
};

---

希望这会对某人有所帮助：）

请展示您的引导和jQuery代码。您到底需要引导和jQuery代码的哪一部分@BPeterson76这将是一个需要添加的重要细节……我马上注意到一件事：您可以删除整个

submitHandler

选项，因为

form.submit（）

是插件的默认行为。（与您的问题无关）您不需要所有无关的

JQUERY4U.UTIL

垃圾。只需将您的

.validate（）

函数放入

文档.ready

函数中即可。研究这个通用演示的代码：~我的演示只使用

submitHandler

来绕过任何真正的提交，因为它在JSFIDLE中。我不知道您是如何删除

submithandler

函数的，但可能您没有删除整个函数？看看我在这里是如何注释我的：应该是appendTo-element。parent（）将是周围的div，appendTo将把错误放在该div的末尾。Jani:your

errorPlacement

回调函数的两个版本都缺少右大括号，

}

。当您在回调函数中正确缩进代码时，错误是显而易见的。请参阅：@user2131149，这是因为Jani的代码中存在语法错误。

errorPlacement

回调函数的右大括号

}

丢失。请参阅：您也可以使用JSFIDLE中的jsHint按钮来查找任何语法错误。@Sparky似乎是这样。现在已经修复了。只需删除.addClass（'add-on'），我只提供了一个示例，因为我刚刚发现您可以一个接一个地使用多个.add-on，bootstrap会将它们组合在一起。这对我来说是新的，所以我想我会分享。但您可以删除它，错误消息将正常显示。

errorPlacement: function(error, element) { 
    if ($(element).hasClass("date-picker") ) {
        error.insertAfter($(element).closest('.input-group'));
    }
    else
    {
        error.insertAfter(element);
    }
};