logo
down
shadow

What is the correct way to validate all form fields on submit when using ng-repeat for dynamic form?


What is the correct way to validate all form fields on submit when using ng-repeat for dynamic form?

By : Greg B
Date : November 17 2020, 11:52 AM
should help you out That is because all your inputs have the same name, hence the behavior due to the form controller instance will have just one property with the name answers and it will point to the last ng-model with that name in the form. Instead provide different names for your inputs using ng-attr-name with probably appending $index and use $invalid property of the form, form will be invalid as long as one of the ng-model(s) (with constraints) within the form is invalid. So just disable the button until the form is invalid since it is a catch-all property on the form controller.
code :
<div ng-repeat="q in questions">
  <!-- Provide dynamic form names -->
  <textarea ng-attr-name="answer{{$index}}" type="text" 
            ng-model="answers[$index]" required></textarea>
 </div>
 <!-- Use form.$invalid -->
 <button ng-disabled="form.$invalid || form.$pristine"  
         type="submit" ng-click="submit(q)">Submit</button>
angular.module('app', []).controller('ctrl', function($scope) {
  $scope.questions = ["q1", "q2"]
  $scope.answers = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <form name="form" novalidate>

    <div ng-repeat="q in questions">
      <textarea ng-attr-name="answer{{$index}}" type="text" ng-model="answers[$index]" required></textarea>


    </div>
    <button ng-disabled="form.$invalid || form.$pristine" type="submit" ng-click="submit(q)">Submit</button>
  </form>
</div>


Share : facebook icon twitter icon
Validate all form fields on submit

Validate all form fields on submit


By : Stone Zing
Date : March 29 2020, 07:55 AM
With these it helps Iterate over the :inputs of the form like this, assuming your in a submit event and the form is this
code :
$(':input', this).each(function(e) {
    if ($(this).val() === '') {
        // do your stuff
    }
});
<input type="text" ... data-error-msg="Some Error Message"/>

$(this).data('error-msg');
Form Send Button Will Not Validate Form Input Text Fields When Asked to Continue Form Submit

Form Send Button Will Not Validate Form Input Text Fields When Asked to Continue Form Submit


By : Lazer Parcaları Satı
Date : March 29 2020, 07:55 AM
this will help I have a form on my webpage at www.thetotempole.ca and for example it has a postal/zip code text field and if the user does not type in a correct zip/postal code the form will display a popup saying that the zip/postal code is not valid. Although, when the user hits submit I want it to display a confirm pop up asking if they really want to send the form. This interferes with the input text field validations (I.E the zip postal code validator) some how and ends up not validating the text fields at all. Any help is appreciated. Thank you!! , A quick-fix:
code :
<input type="submit" onclick="return (validate() && confirm('Do you really want to continue?'))" value="Send" />
AngularJS: How to validate ng-repeat form fields

AngularJS: How to validate ng-repeat form fields


By : user3147033
Date : March 29 2020, 07:55 AM
I wish this helpful for you I think @SunilD'2 comment to another answer is worth an answer of its own, because the approach with ng-form can facilitate more validation scenarios (for example, highlighting a row in the table where one of the inputs is invalid)
code :
<form name="form1">
  <table>
    <tr ng-repeat="param in params">
     <td>
        {{param.name}}
     </td>
     <td ng-form="cellForm">
         <input ng-model="param.val" required />
         <span ng-show="cellForm.$dirty && cellForm.$invalid">
            <span ng-show="cellForm.$error.required">This field is required</span>
         </span>
       </td>
     </tr>
  </table>
</form>
jquery validate form with ajax call to external php file that checks all fields and block form submit if there is error

jquery validate form with ajax call to external php file that checks all fields and block form submit if there is error


By : Matan P
Date : March 29 2020, 07:55 AM
I hope this helps you . Your variable aa will not contain any data that you are expecting (in fact it may contain the promise returned from calling the post method of AJAX).
Moreover you're using the default synchronous type of ajax call with the post method.
code :
 var aa = ''; //the result
 $.ajax({
     url: "checkdescription.php",
     async: false,
     data: {
     description: description
     }, 
     success: function(data, status){
         aa = data;
      }
});
 if(aa === 'error message'){
     return false;
 }
Bootstrape Dynamic Form Fields not working when adding inside a form with Form Submit

Bootstrape Dynamic Form Fields not working when adding inside a form with Form Submit


By : TerenzC
Date : March 29 2020, 07:55 AM
I hope this helps you . You are nesting a form within another form.
Do you really need the following in your second file?
code :
<form role="form" autocomplete="off">
 ...
</form>
<div class="d1"> 
...
</div>
var controlForm = $('.controls form:first'),
var controlForm = $('.controls .d1:first'),
Related Posts Related Posts :
  • AngularJS - Does $resource requests send cookies automatically?
  • Communication between two nested directives angularjs
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • Angularjs - add ng-* attributes using directives
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org