Question

当组合使用Twitter Bootstrap和Jquery Validate时，一切顺利，除非使用带有（icon）插件的字段，如：

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

当出现错误时，HTML如下所示：

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

这就是它在浏览器中的样子：

Browser example http://s8.postimage.org/k1mpy0y1x/example.png

如何解决这个问题？希望有人可以帮忙！

修改

(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());
           });
    });

});

FORM

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

修改

现状：

example 2 http://s8.postimage.org/lypgq05et/example2.png

目标：

example 2 http://s24.postimage.org/ajl63ys8l/example3.png

修改

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

@ jani-hyytiainen的工作解决方案：

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

Answer 1

查看http://docs.jquery.com/Plugins/Validation/validate#toptions

中的errorPlacement选项

$("#myform").validate({
    errorPlacement: function(error, element) {
        element.parent().append(error);
    }
});

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

$("#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);
        }
    }
});

看起来像这样：

Error Placement with add-on class

对不起，日历没有图标，但输入后是正方形。

Answer 2

bootstrap 3 中的日期选择器验证存在此问题。
为了解决这个问题，我检查了元素是否是日期选择器，然后在元素的父组外部显示错误，否则执行默认操作。

这是最终代码。

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

希望这会有所帮助：）

Bootstrap JQuery Validate：输入和<span class =“add-on”> </span>之间的错误消息

2 个答案: