twitter-bootstrap 水平表单验证答案

【问题标题】：twitter-boostrap horizontal form validationtwitter-bootstrap 水平表单验证
【发布时间】：2012-11-13 14:02:57
【问题描述】：

这是一个水平的例子

    <input data-val="true" data-val-required="The password and confirmation password:" id="InstanceID" name="MainSearchModel.InstanceID" placeholder="Enter instanceID..." type="text" value="" />


    <input id="MainSearchModel_ServiceName" name="MainSearchModel.ServiceName" placeholder="Enter serviceName..." type="text" value="" />

我正在尝试验证表单，但是当我使用引导程序 class="control-group" 和 jQuery-Live-Form-Validation-For-Twitter-Bootstrap 时为错误描述创建空白空间，您可以在此处看到from after adding class。

验证水平表单的最佳方法是什么？

我怎样才能让消息出现在文本框的底部而不是出现在文本框的右侧？

谢谢

【问题讨论】：

标签： jquery jquery-ui twitter-bootstrap

【解决方案1】：

使用此按钮检查验证并禁用表单的 AJAX 和 CLIENT 验证：

$this -> widget('bootstrap.widgets.TbButton', array(
            'buttonType' => 'ajaxSubmit',
            'icon' => 'ok',
            'url' => Yii::app() -> createUrl('hr/userTime/create'),
            'label' => 'Submit',
            'ajaxOptions' => array('success' => 'function(data){
                    var obj = $.parseJSON(data);
                    if(obj.status=="success"){
                        $("#newUserTime").modal("hide");
                        setTimeout(function(){location.reload(true);},400);
                    } else {
                        $("#userTime-form-error-div").show();
                        $("#userTime-form-error-div").html("");
                        var $inputs = $("#user-time-form :input");
                        $inputs.each(function() {
                            $(this).removeClass("error");
                            $(this).closest(\'div[class^="control-group"]\').addClass("success validating");
                        });
                        for (var p in obj) {
                            if(document.getElementById(p)) {
                                $("#"+p).closest(\'div[class^="control-group"]\').removeClass("success");
                                $("#"+p).closest(\'div[class^="control-group"]\').addClass("error");
                            }
                            $("#userTime-form-error-div").append(obj[p]  + "<br/>");
                        }
                    }
                }'),
    ));

希望这将帮助某人获得有效和错误字段的一个很好的亮点！

【讨论】：