Jquery 使用引导验证程序分别验证同一行中的字段

我想在我的项目中使用

bootstrap validator

，我只是用一个虚拟html页面进行了尝试。在我的页面中，我有一个

div

，它在同一行中包含两个输入字段。这是我的表格

<form class="form-horizontal registerForm form1">
    <div class="form-group">
        <label class="col-sm-2 control-label">Account</label>

        <div class="col-sm-4">
            <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>

        <div class="col-sm-4">
            <input type="text" class="form-control" name="email" placeholder="Email address" />
        </div>
    </div>
</form>

账户

如果我从引导应用验证，它将同时验证这两个字段，因为它们位于一个

表单组
类中

这就是它的工作原理

有没有办法单独进行验证
 您需要在html中声明一行（即制作一个
），并将相同的行放入其中。然后，您需要在验证代码中使用
行
“选项”（如文档所称）。我正在粘贴0.6.2版引导验证程序的示例代码。（我粘贴的是“编程”版本——没有提供此示例的“声明”版本。）


/*调整反馈图标位置*/
#电影表单。表单控制反馈{
右：15px；
}
#电影表单。选择容器。表单控制反馈{
右：25px；
}
电影名称
体裁
选择一种类型
行动
喜剧片
恐怖
浪漫
经理
作家
制作人
网站
Youtube预告片
复习
评级
可怕的
可观察
最好的
验证
$（文档）.ready（函数（）{
$（“#movieForm”）.formValidation({
框架：“bootstrap”，
图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
标题：{
行：'.col-xs-8'，
验证器：{
注意：{
消息：“标题是必需的”
},
弦长：{
最高：200，
消息：“标题长度必须少于200个字符”
}
}
},
类型：{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“需要该类型”
}
}
},
主任:{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“需要控制器名称”
},
弦长：{
最高：80，
消息：“控制器名称长度必须少于80个字符”
}
}
},
作者：{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“写入程序名称是必需的”
},
弦长：{
最高：80，
消息：“编写器名称的长度必须少于80个字符”
}
}
},
制作人：{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“生产者名称是必需的”
},
弦长：{
最高：80，
消息：“生产者名称的长度必须少于80个字符”
}
}
},
网站：{
行：'.col-xs-6'，
验证器：{
注意：{
消息：“需要提供网站地址”
},
uri:{
消息：“网站地址无效”
}
}
},
拖车：{
行：'.col-xs-6'，
验证器：{
注意：{
消息：“需要拖车链接”
},
uri:{
消息：“拖车链接无效”
}
}
},
审查：{
//该组将设置为默认值（.form group）
验证器：{
弦长：{
最高：500，
消息：“审阅长度必须少于500个字符”
}
}
},
评级：{
//该组将设置为默认值（.form group）
验证器：{
注意：{
消息：“评级是必需的”
}
}
}
}
});
});
//使用数据切换=“验证器”角色=“表单”。
//对包含div的每个输入字段使用.form组。
//对包含div的每个输入字段使用.form组。
//使用“电子邮件”作为类型。
用小提琴给我们演示一下。@CerlinBo
<style type="text/css">
/* Adjust feedback icon position */
#movieForm .form-control-feedback {
    right: 15px;
}
#movieForm .selectContainer .form-control-feedback {
    right: 25px;
}
</style>

<form id="movieForm" method="post">
    <div class="form-group">
        <div class="row">
            <div class="col-xs-8">
                <label class="control-label">Movie title</label>
                <input type="text" class="form-control" name="title" />
            </div>

            <div class="col-xs-4 selectContainer">
                <label class="control-label">Genre</label>
                <select class="form-control" name="genre">
                    <option value="">Choose a genre</option>
                    <option value="action">Action</option>
                    <option value="comedy">Comedy</option>
                    <option value="horror">Horror</option>
                    <option value="romance">Romance</option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-xs-4">
                <label class="control-label">Director</label>
                <input type="text" class="form-control" name="director" />
            </div>

            <div class="col-xs-4">
                <label class="control-label">Writer</label>
                <input type="text" class="form-control" name="writer" />
            </div>

            <div class="col-xs-4">
                <label class="control-label">Producer</label>
                <input type="text" class="form-control" name="producer" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-xs-6">
                <label class="control-label">Website</label>
                <input type="text" class="form-control" name="website" />
            </div>

            <div class="col-xs-6">
                <label class="control-label">Youtube trailer</label>
                <input type="text" class="form-control" name="trailer" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">Review</label>
        <textarea class="form-control" name="review" rows="8"></textarea>
    </div>

    <div class="form-group">
        <label class="control-label">Rating</label>
        <div>
            <label class="radio-inline">
                <input type="radio" name="rating" value="terrible" /> Terrible
            </label>
            <label class="radio-inline">
                <input type="radio" name="rating" value="watchable" /> Watchable
            </label>
            <label class="radio-inline">
                <input type="radio" name="rating" value="best" /> Best ever
            </label>
        </div>
    </div>

    <button type="submit" class="btn btn-default">Validate</button>
</form>

<script>
$(document).ready(function() {
    $('#movieForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            title: {
                row: '.col-xs-8',
                validators: {
                    notEmpty: {
                        message: 'The title is required'
                    },
                    stringLength: {
                        max: 200,
                        message: 'The title must be less than 200 characters long'
                    }
                }
            },
            genre: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The genre is required'
                    }
                }
            },
            director: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The director name is required'
                    },
                    stringLength: {
                        max: 80,
                        message: 'The director name must be less than 80 characters long'
                    }
                }
            },
            writer: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The writer name is required'
                    },
                    stringLength: {
                        max: 80,
                        message: 'The writer name must be less than 80 characters long'
                    }
                }
            },
            producer: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The producer name is required'
                    },
                    stringLength: {
                        max: 80,
                        message: 'The producer name must be less than 80 characters long'
                    }
                }
            },
            website: {
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The website address is required'
                    },
                    uri: {
                        message: 'The website address is not valid'
                    }
                }
            },
            trailer: {
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The trailer link is required'
                    },
                    uri: {
                        message: 'The trailer link is not valid'
                    }
                }
            },
            review: {
                // The group will be set as default (.form-group)
                validators: {
                    stringLength: {
                        max: 500,
                        message: 'The review must be less than 500 characters long'
                    }
                }
            },
            rating: {
                // The group will be set as default (.form-group)
                validators: {
                    notEmpty: {
                        message: 'The rating is required'
                    }
                }
            }
        }
    });
});
</script>

<form class="form-horizontal registerForm form1" data-toggle="validator" role="form"> //use data-toggle="validator" role="form".
    <div class="row">
        <div class="form-group col-sm-4"> //use .form-group for every input field included div.
            <input type="text" class="form-control" name="username" placeholder="Username">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-4"> //use .form-group for every input field included div.
            <input type="email" class="form-control"  name="email" placeholder="Email address"> //use "email" as type.
        </div>
   </div>
</form>