我只有一个表单组。提交按钮只有在所有表单输入都有效时才会启用。然而,提交按钮已经启用了一半。当我尝试声明另一个具有相同 id 的表单标签时,另一半有效但前半无效。我不知道表单标签的正确位置,而且由于引导网格,我使用了很多标签。
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<div class="row">
</div>
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<div>
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control" name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</div>
</fieldset>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
执行代码演练并检查以下内容:
- 检查并删除未使用的标签
- 将结束标签放在适当的位置
这是一个编辑过的代码,试试这个,希望它有效!
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</div>
<form name="formCreate" novalidate>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control"
name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</fieldset>
</div>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于HTML 表单不作为一个连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44065352/