HTML 表单不作为一个连接

Question

我只有一个表单组。提交按钮只有在所有表单输入都有效时才会启用。然而，提交按钮已经启用了一半。当我尝试声明另一个具有相同 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>

Answer 1

执行代码演练并检查以下内容:

1. 检查并删除未使用的标签
2. 将结束标签放在适当的位置

这是一个编辑过的代码，试试这个，希望它有效!

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