title: stop dynamic add field to form when form is invalid
body: <p>Followed below code to add and display etra fields to forms dynamically with &quot;Add another&quot; button. Code is working but problem is on &quot;Add another&quot; button click (when form in invalid) additional form fields are added to form but not displayed. Want to make sure when form is invalid extra fields are not added to form.</p>
  <p><strong>Forms</strong></p>
  <pre><code>class MyForm(forms.Form):
      original_field = forms.CharField()
      extra_field_count = forms.CharField(widget=forms.HiddenInput())
  
      def __init__(self, *args, **kwargs):
          extra_fields = kwargs.pop('extra', 0)
  
          super(MyForm, self).__init__(*args, **kwargs)
          self.fields['extra_field_count'].initial = extra_fields
  
          for index in range(int(extra_fields)):
              # generate extra fields in the number specified via extra_fields
              self.fields['extra_field_{index}'.format(index=index)] = \
                  forms.CharField()
  </code></pre>
  <p><strong>View</strong></p>
  <pre><code>def myview(request):
      if request.method == 'POST':
          form = MyForm(request.POST, extra=request.POST.get('extra_field_count'))
          if form.is_valid():
              print &quot;valid!&quot;
      else:
          form = MyForm()
      return render(request, &quot;template&quot;, { 'form': form })
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;form&gt;
      &lt;div id=&quot;forms&quot;&gt;
          {{ form.as_p }}
      &lt;/div&gt;
      &lt;button id=&quot;add-another&quot;&gt;add another&lt;/button&gt;
      &lt;input type=&quot;submit&quot; /&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>&lt;script&gt;
  let form_count = Number($(&quot;[name=extra_field_count]&quot;).val());
  // get extra form count so we know what index to use for the next item.
  
  $(&quot;#add-another&quot;).click(function() {
      form_count ++;
  
      let element = $('&lt;input type=&quot;text&quot;/&gt;');
      element.attr('name', 'extra_field_' + form_count);
      $(&quot;#forms&quot;).append(element);
      // build element and append it to our forms container
  
      $(&quot;[name=extra_field_count]&quot;).val(form_count);
      // increment form count so our view knows to populate 
      // that many fields for validation
  })
  &lt;/script&gt;
  </code></pre>