Работа с несколькими формами на странице - PullRequest
Новая
       87

Работа с несколькими формами на странице

0 голосов
/ 02 августа 2020

У меня есть страница с 2 формами, которые используют AngularJs для проверки следующим образом: 

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
  </ul>
  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <form id="contactForm" class="contact__form" method="post" action="mail.php" name="contactForm" novalidate>
        <div class="form-group" ng-class="{'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine && contactForm.name.$touched}">
          <input type="text" class="form-control" id="name" placeholder="* Full name" name="name"  ng-model="user.name" ng-minlength="3" required>
          <p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine && contactForm.name.$touched" class="help-block">Please enter full name</p>
        </div>
        <div class="form-group" ng-class="{'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine && contactForm.email.$touched}">
          <input type="email" class="form-control" id="email" placeholder="* Email address" name="email" ng-model="user.email" required>
          <p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine && contactForm.email.$touched" class="help-block">Please enter valid email address</p>
        </div>
        <div class="text-left">
          <button type="submit" id="submit" ng-disabled="contactForm.$invalid" class="btn">Submit</button>
        </div>
      </form>
    </div>
    <div id="menu2" class="tab-pane fade">
      <form id="contactForm2" class="contact__form" method="post" action="mail.php2" name="contactForm2" novalidate>
        <div class="form-group" ng-class="{'has-error' : contactForm2.name.$invalid && !contactForm2.name.$pristine && contactForm2.name.$touched}">
          <input type="text" class="form-control" id="name2" placeholder="* Full name" name="name2"  ng-model="user.name2" ng-minlength="3" required>
          <p ng-show="contactForm2.name.$invalid && !contactForm2.name.$pristine && contactForm2.name.$touched" class="help-block">Please enter full name</p>
        </div>
        <div class="form-group" ng-class="{'has-error' : contactForm2.email.$invalid && !contactForm2.email.$pristine && contactForm2.email.$touched}">
          <input type="email" class="form-control" id="email2" placeholder="* Email address" name="email2" ng-model="user.email2" required>
          <p ng-show="contactForm2.email.$invalid && !contactForm2.email.$pristine && contactForm2.email.$touched" class="help-block">Please enter valid email address</p>
        </div>
        <div class="text-left">
          <button type="submit" id="submit2" ng-disabled="contactForm2.$invalid" class="btn">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

Формы отображаются хорошо, однако все, что я делаю в одной форме, влияет на другую. AngularJs хорошо проверяет первую форму, но не вторую. Например, кнопка отправки второй формы не станет активной, даже если все поля были введены правильно. Если входные данные первой формы были заполнены, вторая форма также проходит проверку. Я пытался изменить идентификаторы и имена во второй форме, но все равно ничего не вышло.

...