2

当结合使用 Twitter Bootstrap 和 Jquery Validate 时，一切正常，除非使用带有（图标）附加组件的字段，例如：

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

这就是它在浏览器中的外观：

浏览器示例

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

编辑

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

});

形式

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

编辑

现在的情况：

示例 2

目标：

示例 2

编辑

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

2 回答 2

5

查看此处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);
        }
    }
});

它看起来像这样：

附加类的错误放置

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

于 2013-03-05T16:15:03.487 回答
0

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

这是最终代码。

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

希望这会对某人有所帮助:)

于 2014-04-07T06:24:22.947 回答