I am using two forms in one page address1 and address2 i am using anugular js validation on submit, how can i validate both forms when button on another form is clicked.
`
答案 0 :(得分：0)
调用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>