angular js如何在提交一个表单时验证另一个表单
angular js how to validate another form when one form is submitted
我在一个页面中使用两个表单address1和address2我在提交时使用anugular js验证，当单击另一个表单上的按钮时，我如何验证这两个表单。
`
称为secondform$在表格1上提交以验证表格1
<div ng-controller="AddressController as Addr">
<div class="row" >
<div class=" col-sm-5 col-md-6 " >
<form name="addressForm" valid-submit="checkout()" novalidate class="form-horizontal col-sm-11 col-md-12" >
<div class="panel panel-default mar-t">
<h3 class="panel-heading nomar-t">Billing Address </h3>
<div class="space-pad">
<div class="form-group" ng-class="{ 'has-error' : addressForm.firstname.$invalid && addressForm2.$submitted}" >
<label class="control-label col-sm-4" for="firstname">First Name:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="50" name="firstname" required value="" placeholder="Enter First Name"ng-model="Address.first_name" ng-minlength="1" ng-maxlength="25" >
<p ng-show="addressForm.firstname.$error.required && addressForm2.$submitted" class="help-block">First Name is required.</p>
<p ng-show="addressForm.firstname.$error.minlength && addressForm2.$submitted" class="help-block">First Name is too short.</p>
<p ng-show="addressForm.firstname.$error.maxlength && addressForm2.$submitted" class="help-block">First Name is too long.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.lastname.$invalid && addressForm2.$submitted}">
<label class="control-label col-sm-4" for="lastname">Last Name:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="50" name="lastname" style="" required placeholder="Enter Last Name" ng-model="Address.last_name" ng-minlength="1" ng-maxlength="25" />
<p ng-show="addressForm.lastname.$error.minlength && addressForm2.$submitted" class="help-block">Last Name is too short.</p>
<p ng-show="addressForm.lastname.$error.maxlength && addressForm2.$submitted" class="help-block">Last Name is too long.</p>
<p ng-show="addressForm.lastname.$error.required && addressForm2.$submitted" class="help-block">Last Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.address1.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="address1">Address 1:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="100" name="address1" required placeholder="Enter Address"ng-model="Address.address_1" ng-minlength="1" ng-maxlength="100" maxlenth="100" >
<p ng-show="addressForm.address1.$error.minlength && addressForm2.$submitted" class="help-block">Address is too short.</p>
<p ng-show="addressForm.address1.$error.maxlength && addressForm2.$submitted" class="help-block">Address is too long.</p>
<p ng-show="addressForm.address1.$error.required && addressForm2.$submitted" class="help-block">Address is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.address2.$invalid && addressForm.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">Address 2:</label>
<div class="col-sm-8"> <input type="text" class="form-control " name="address2" maxlength="100" placeholder="Enter Address 2" ng-model="Address.address_2" ng-minlength="1" ng-maxlength="100" maxlenth="100"></div>
<!--<p ng-show="addressForm.address2.$error.minlength" class="help-block">Address is too short.</p>-->
<!--<p ng-show="addressForm.address2.$error.maxlength" class="help-block">Address is too long.</p>-->
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.city.$invalid && addressForm2.$submitted }" >
<label class="control-label col-sm-4" for="city">City:<span class="redstar">*</span></label>
<div class="col-sm-8"><input type="text" class="form-control " name="city" placeholder="Enter city" maxlength="50" required placeholder=""ng-model="Address.city" ng-minlength="1" ng-maxlength="50">
<p ng-show="addressForm.city.$error.minlength && addressForm2.$submitted" class="help-block">City Name is too short.</p>
<p ng-show="addressForm.city.$error.maxlength && addressForm2.$submitted" class="help-block">City Name is too long.</p>
<p ng-show="addressForm.city.$error.required && addressForm2.$submitted" class="help-block">City Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.state.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">State:<span class="redstar">*</span></label>
<div class="col-sm-8"> <select name="state" class="form-control"ng-model="Address.state_id" required>
<option value="" disabled selected>Select State</option>
<option value="1">Georgia</option>
<option value="2">NewYork</option>
</select>
<p ng-show="addressForm.state.$error.required && addressForm2.$submitted" class="help-block">Please select a state.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.zipcode.$invalid && addressForm2.$submitted}">
<label class="control-label col-sm-4" for="zipcode">Zip Code:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="5" placeholder="Enter Zip Code" name="zipcode" required placeholder=""ng-model="Address.zip_code" ng-pattern="/^'d{6}$" >
<p ng-show="addressForm.zipcode.$invalid && addressForm2.$submitted" class="help-block">Please enter a valid zip code.</p>
<p ng-show="addressForm.zipcode.required && addressForm2.$submitted" class="help-block">Zip code is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.country.$invalid &&addressForm2.$submitted }">
<label class="control-label col-sm-4 " for="country">Country:</label>
<div class="col-sm-8">
<select name="country" class="form-control" ng-model="Address.country_id">
<option value="" disabled selected>Select Country </option>
<option value="1">USA</option>
</select></div>
<!--<p ng-show="addressForm.country.$error.required" class="help-block">Please Select a Country</p>-->
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="landlinephoneno">Land-Phone no:</label>
<div class="col-sm-8"><input type="text" class="form-control " maxlength="10" name="landlinephoneno" placeholder="Enter Land-Phone no"ng-model="Address.landline_phone_no"></div>
<!--<p ng-show="addressForm.landlinephoneno.$error.required" class="help-block">Please enter a Land line phone no</p>-->
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.mobilephoneno.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="mobilephoneno">Mobile no:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="10" placeholder="Enter Mobile no" name="mobilephoneno" required ng-minlength="10" ng-maxlength="12" placeholder=""ng-model="Address.mobile_phone_no" ng-pattern="/^[0-9]">
<p ng-show="addressForm.mobilephoneno.$invalid && addressForm2.$submitted" class="help-block">Please enter a valid mobile number.</p>
<p ng-show="addressForm.mobilephoneno.required && addressForm2.$submitted" class="help-block">Mobile number is required.</p>
</div>
<!--<p ng-show="addressForm.mobilephoneno.$error.required" class="help-block">Please enter a mobile number</p>-->
<!--<p ng-show="addressForm.mobilephoneno.$error.maxlenght" class="help-block">Please enter a valid mobile number</p>-->
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm.altemail.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">Email:</label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="50" name="altemail" placeholder="Enter Email"ng-model="Address.alt_email">
<p ng-show="addressForm.altemail.$invalid && addressForm2.$submitted" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group ">
<lable class="col-sm-7 col-sm-offset-4"> <input type="checkbox" ng-model="billingAdd" ng-change="checkChange()"> same as shipping address
</lable>
</div>
<div >
</div>
</div>
</div>
</form>
</div>
<div class=" col-sm-5 col-md-6 address form-horizontal" >
<form name="addressForm2" valid-submit="checkout()" novalidate class="form-group col-sm-11 col-md-12 mar-t" >
<div class="panel panel-default ">
<h3 class="panel-heading nomar-t">Shipping Address </h3>
<div class="space-pad">
<div class="form-group " ng-class="{ 'has-error' : addressForm2.firstname.$invalid && addressForm2.$submitted}" >
<label class="control-label col-sm-4" for="firstname">First Name:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="50" name="firstname" required value="" placeholder="Enter First Name"ng-model="Address2.first_name" ng-minlength="1" ng-maxlength="25" >
<p ng-show="addressForm2.firstname.$error.required && addressForm2.$submitted" class="help-block">First Name is required.</p>
<p ng-show="addressForm2.firstname.$error.minlength && addressForm2.$submitted" class="help-block">First Name is too short.</p>
<p ng-show="addressForm2.firstname.$error.maxlength && addressForm2.$submitted" class="help-block">First Name is too long.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.lastname.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="lastname">Last Name:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " maxlength="50" name="lastname" style="" required placeholder="Enter Last Name" ng-model="Address2.last_name" ng-minlength="1" ng-maxlength="25" />
<p ng-show="addressForm2.lastname.$error.minlength && addressForm2.$submitted" class="help-block">Last Name is too short.</p>
<p ng-show="addressForm2.lastname.$error.maxlength && addressForm2.$submitted" class="help-block">Last Name is too long.</p>
<p ng-show="addressForm2.lastname.$error.required && addressForm2.$submitted" class="help-block">Last Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.address1.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="address1">Address 1:<span class="redstar">*</span></label>
<div class="col-sm-8"><input type="text" class="form-control " name="address1" maxlength="100" required placeholder="Enter Address"ng-model="Address2.address_1" ng-minlength="1" ng-maxlength="100" >
<p ng-show="addressForm2.address1.$error.required && addressForm2.$submitted" class="help-block">Address is required.</p>
<p ng-show="addressForm2.address1.$error.minlength && addressForm2.$submitted" class="help-block">Address is too short.</p>
<p ng-show="addressForm2.address1.$error.maxlength && addressForm2.$submitted" class="help-block">Address is too long.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.address2.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">Address 2:</label>
<div class="col-sm-8"><input type="text" class="form-control " name="address2" maxlength="100" placeholder="Enter Address 2" ng-model="Address2.address_2" ng-minlength="1" ng-maxlength="100" ></div>
<!--<p ng-show="addressForm2.address2.$error.minlength" class="help-block">Address is too short.</p>-->
<!--<p ng-show="addressForm2.address2.$error.maxlength" class="help-block">Address is too long.</p>-->
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.city.$invalid && addressForm2.$submitted }" >
<label class="control-label col-sm-4" for="city">City:<span class="redstar">*</span></label>
<div class="col-sm-8"><input type="text" class="form-control " name="city" required placeholder="Enter City" ng-model="Address2.city" ng-minlength="1" ng-maxlength="100">
<p ng-show="addressForm2.city.$error.minlength && addressForm2.$submitted" class="help-block">City Name is too short.</p>
<p ng-show="addressForm2.city.$error.maxlength && addressForm2.$submitted" class="help-block">City Name is too long.</p>
<p ng-show="addressForm2.city.$error.required && addressForm2.$submitted" class="help-block">City Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.state.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">State:<span class="redstar">*</span></label>
<div class="col-sm-8"> <select name="state" ng-model="Address2.state_id" required class="form-control">
<option value="" disabled selected>Select State </option>
<option value="1">Georgia</option>
<option value="2">NewYork</option>
</select>
<p ng-show="addressForm2.state.$error.required && addressForm2.$submitted" class="help-block">Please select a state.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.zipcode.$invalid && addressForm2.$submitted}">
<label class="control-label col-sm-4" for="zipcode">Zip Code:<span class="redstar">*</span></label>
<div class="col-sm-8"> <input type="text" class="form-control " name="zipcode" maxlength="6" placeholder="Enter Zip Code" placeholder=""ng-model="Address2.zip_code" ng-pattern="/^'d{6}$" required>
<p ng-show="addressForm2.zipcode.$invalid && addressForm2.$submitted" class="help-block">Please enter a valid zip code.</p>
<p ng-show="addressForm2.zipcode.required && addressForm2.$submitted" class="help-block">Zip code is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.country.$invalid &&addressForm2.$submitted }">
<label class="control-label col-sm-4" for="country">Country:</label>
<div class="col-sm-8"><select name="country"ng-model="Address2.country_id" class="form-control">
<option value="" disabled selected>Select your country </option>
<option value="1">USA</option>
</select></div>
<!--<p ng-show="addressForm2.country.$error.required" class="help-block">Please Select a Country</p>-->
</div>
<div class="form-group" >
<label class="control-label col-sm-4" for="landlinephoneno">Land-Phone no:</label>
<div class="col-sm-8"> <input type="text" class="form-control " name="landlinephoneno" maxlength="10" placeholder="Enter Land-Phone no" placeholder=""ng-model="Address2.landline_phone_no"></div>
<!--<p ng-show="addressForm2.landlinephoneno.$error.required" class="help-block">Please enter a Land line phone no</p>-->
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.mobilephoneno.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="mobilephoneno">Mobile no:<span class="redstar">*</span></label>
<div class="col-sm-8"><input type="text" class="form-control " name="mobilephoneno" placeholder="Enter Modil no" maxlength="10" required ng-minlength="10" ng-maxlength="12" ng-model="Address2.mobile_phone_no" ng-pattern="/^[0-9]">
<!--<p ng-show="addressForm2.mobilephoneno.$error.required" class="help-block">Please enter a mobile number</p>
<p ng-show="addressForm2.mobilephoneno.$error.maxlenght" class="help-block">Please enter a valid mobile number</p>-->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : addressForm2.altemail.$invalid && addressForm2.$submitted }">
<label class="control-label col-sm-4" for="reg-firstname">Email:</label>
<div class="col-sm-8"><input type="text" class="form-control " name="altemail" maxlength="50" placeholder="Enter Email"ng-model="Address2.alt_email">
<p ng-show="addressForm2.altemail.$invalid && addressForm2.$submitted" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class=" text-right" >
<button type="submit" class="btn btn-primary " > checkout </button>
</div>
</div>
</div>
</form>
</div>
</div>
相关文章：
- 后焦点更改为IE 11中的地址栏，而不是转移到表单中的下一个控件
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- jquery mobile上多个页面上的一个表单
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 循环遍历包含另一个表单的表单
- jquery从2个json字符串构建一个复选框表单
- 为网站表单创建一个专业的日历
- 如何在javascript转换编码中将一个动态值从一个表单添加到另一个页面
- 我确实有一个表单，如果用户输入了输入，它应该检查否定或空的输入框，并抛出一条警告消息
- 在表单中创建一个黑名单过滤器以避免某些单词
- 从一个iframe到另一个ifame的过帐表单-IE
- 从表单中动态生成一个字符串，传递给通过AJAX加载的PHP文件
- 页面上的2个表单带有JS验证-其中一个抛出电子邮件验证错误
- 需要一个用于AJAX的Javascript库，其中包含多部分/表单数据
- 当阻止Enter键提交AJAX表单时，关注下一个输入是't工作
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 在另一个可观察量完成后触发第二个表单提交单击
- 两个表单 - 一个提交按钮
- 多表单一个ajax函数
