Javascript 水平表单的引导验证
我正在使用的引导验证程序面临一个奇怪的问题。这是一把小提琴： 注意：调整输出窗口的大小以查看实际表单 HTML代码Javascript 水平表单的引导验证,javascript,jquery,html,twitter-bootstrap,validation,Javascript,Jquery,Html,Twitter Bootstrap,Validation,我正在使用的引导验证程序面临一个奇怪的问题。这是一把小提琴： 注意：调整输出窗口的大小以查看实际表单 HTML代码 <form class="form-horizontal" id="main-form" role="form" method="post"> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
<form class="form-horizontal" id="main-form" role="form" data-toggle="validator"
action="blank.html" method="post">
<!-- Text input -->
<div class="form-group">
<div class="group"> <!-- Added this div surrounding each input -->
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID"
class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name"
class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>
我面临的问题是，我只对前3个字段进行了设置验证，即ProjectID、项目名称和发布日期。单击submit按钮后，引导错误类也将应用于相邻的field Supervisor。有没有办法防止这种情况发生？只有一个错误。用我的HTML替换你的HTML 错误是：你错过了主管的小组课
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID"
class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="inputSupervisor" name="inputSupervisor" type="text" placeholder="Your Supervisor's Name"
class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
项目ID
项目名称
发布日期
监督人
项目说明
提交
只有一个错误。用我的HTML替换你的HTML 错误是：你错过了主管的小组课
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID"
class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="inputSupervisor" name="inputSupervisor" type="text" placeholder="Your Supervisor's Name"
class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
项目ID
项目名称
发布日期
监督人
项目说明
提交
请尝试此操作，似乎在验证错误时，整个
表单组应用了验证错误
小提琴：
控件标签
类导致此问题。我已将其从主管
中删除，现在它按预期工作
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text"
placeholder="Your Project ID" class="form-control input-md" />
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md" />
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md" />
</div>
<label class="col-md-2" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text"
placeholder="Your Supervisor's Name" class="form-control input-md" />
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description
</label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control"
id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form"
data-toggle="tooltip" title="Click to submit this form" onclick="submitForms()">Submit
</button>
</form>
项目ID
项目名称
发布日期
监督人
项目说明
提交
请尝试此操作，似乎在验证错误时，整个表单组应用了验证错误
小提琴：
控件标签
类导致此问题。我已将其从主管
中删除，现在它按预期工作
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text"
placeholder="Your Project ID" class="form-control input-md" />
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md" />
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md" />
</div>
<label class="col-md-2" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text"
placeholder="Your Supervisor's Name" class="form-control input-md" />
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description
</label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control"
id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form"
data-toggle="tooltip" title="Click to submit this form" onclick="submitForms()">Submit
</button>
</form>
项目ID
项目名称
发布日期
监督人
项目说明
提交
终于找到了一种在一行中处理多个表单组的方法。只是围绕每个输入创建了一个div，给它分配了一个类&然后在JS代码中提到了类名。请参阅下面更新的HTML&JS代码
HTML代码
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
<form class="form-horizontal" id="main-form" role="form" data-toggle="validator"
action="blank.html" method="post">
<!-- Text input -->
<div class="form-group">
<div class="group"> <!-- Added this div surrounding each input -->
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID"
class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name"
class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>
这终于对我起作用了！！
以下是最新的小提琴：
终于找到了一种在一行中处理多个表单组的方法。只是围绕每个输入创建了一个div，给它分配了一个类&然后在JS代码中提到了类名。请参阅下面更新的HTML&JS代码
HTML代码
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
<form class="form-horizontal" id="main-form" role="form" data-toggle="validator"
action="blank.html" method="post">
<!-- Text input -->
<div class="form-group">
<div class="group"> <!-- Added this div surrounding each input -->
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID"
class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name"
class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>
这终于对我起作用了！！
以下是最新的小提琴：
在主管输入字段中添加另一个类并设置默认边框颜色在主管输入字段中添加另一个类并设置默认边框颜色我已经尝试过了。它不起作用。此外，我希望字段彼此相邻，因此这两个字段都位于单个表单组中，而不是单个表单组中。我希望supervisor字段与Release date字段相邻。这是我的要求。否则这可能是一个solution@JestinoSam我修好了。请检查更新的答案和小提琴我可以看到错误类仍然被应用到你的小提琴督导领域。没有按预期工作。@JestinoSam hve u用最新的小提琴回答/2链接？我已经试过了。它不起作用。此外，我希望字段彼此相邻，因此这两个字段都位于单个表单组中，而不是单个表单组中。我希望supervisor字段与Release date字段相邻。这是我的要求。否则这可能是一个solution@JestinoSam我修好了。请检查更新的答案和小提琴我可以看到错误类仍然被应用到你的小提琴督导领域。没有按预期工作。@JestinoSam hve u用最新的小提琴回答/2链接？对不起，这不是我所期望的。请看清楚小提琴。我可以知道你在期待什么吗？检查小提琴。我只对项目ID、项目名称和发布日期应用了验证，但仍然将错误类应用于Supervisor字段。似乎整个表单组都被选中了Hey Jestino，请检查我的小提琴。在验证表单时不会验证Supervisor字段。我已经清楚地提到，在发布日期旁边需要Supervisor字段。请阅读以上评论，这不是我所期望的。请看清楚小提琴。我可以知道你在期待什么吗？检查小提琴。我只对项目ID、项目名称和发布日期应用了验证，但仍然将错误类应用于Supervisor字段。似乎整个表单组都被选中了Hey Jestino，请检查我的小提琴。在验证表单时不会验证Supervisor字段。我已经清楚地提到，在发布日期旁边需要Supervisor字段。请阅读上面的评论，这是我的工作，这有助于我解决问题。谢谢。这是我的工作，这有助于我解决问题。谢谢。