Как подключить внешний javascript к форме?

129
25 ноября 2020, 22:50

Каким образом можно подключить внешний javascript файл к форме?

$(document).ready(function(){ 
 
  $('input[type="tel"]').inputmask('+7 (999) 999 99 99', { 
    clearMaskOnLostFocus: true, 
  }); 
 
  $('.js-form-validate').submit(function () { 
    var form = $(this); 
    var field = []; 
    form.find('input[data-validate]').each(function () { 
      field.push('input[data-validate]'); 
      var value = $(this).val(), 
          line = $(this).closest('.some-form__line'); 
      for(var i=0;i<field.length;i++) { 
        if( !value ) { 
          line.addClass('some-form__line-required'); 
          setTimeout(function() { 
            line.removeClass('some-form__line-required') 
          }.bind(this),2000); 
          event.preventDefault(); 
        } 
      } 
    }); 
  }); 
});
<div class="some-form"> 
  <form action="" method="" class="form js-form-validate"> 
    <div class="some-form__header title">Заголовок формы #1</div> 
 
    <div class="some-form__line"> 
      <input type="text" name="name" placeholder="Ваше имя *" data-validate> 
      <span class="some-form__hint">Обязательно для заполнения</span> 
    </div> 
    <div class="some-form__line"> 
      <input type="tel" name="phone" placeholder="Телефон *" data-validate> 
      <span class="some-form__hint">Обязательно для заполнения</span> 
    </div> 
    <div class="some-form__line"> 
      <input type="email" name="mail" placeholder="E-mail"> 
    </div> 
 
    <div class="some-form__submit"> 
      <input type="submit" value="Отправить" class="button button_submit button_wide"> 
    </div> 
  </form> 
</div>

Answer 1

$(document).ready(function(){ 
 
  $('input[type="tel"]').inputmask('+7 (999) 999 99 99', { 
    clearMaskOnLostFocus: true, 
  }); 
 
  $('.js-form-validate').submit(function () { 
    var form = $(this); 
    var field = []; 
    form.find('input[data-validate]').each(function () { 
      field.push('input[data-validate]'); 
      var value = $(this).val(), 
          line = $(this).closest('.some-form__line'); 
      for(var i=0;i<field.length;i++) { 
        if( !value ) { 
          line.addClass('some-form__line-required'); 
          setTimeout(function() { 
            line.removeClass('some-form__line-required') 
          }.bind(this),2000); 
          event.preventDefault(); 
        } 
      } 
    }); 
  }); 
});
<div class="some-form"> 
  <form action="" method="" class="form js-form-validate"> 
    <div class="some-form__header title">Заголовок формы #1</div> 
 
    <div class="some-form__line"> 
      <input type="text" name="name" placeholder="Ваше имя *" data-validate> 
      <span class="some-form__hint">Обязательно для заполнения</span> 
    </div> 
    <div class="some-form__line"> 
      <input type="tel" name="phone" placeholder="Телефон *" data-validate> 
      <span class="some-form__hint">Обязательно для заполнения</span> 
    </div> 
    <div class="some-form__line"> 
      <input type="email" name="mail" placeholder="E-mail"> 
    </div> 
 
    <div class="some-form__submit"> 
      <input type="submit" value="Отправить" class="button button_submit button_wide"> 
    </div> 
  </form> 
</div> 
 
<script 
  src="https://code.jquery.com/jquery-3.3.1.min.js" 
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
  crossorigin="anonymous"></script> 
  <script type='text/javascript' src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>