Как запустить функцию, если html форма недействительна?

Question

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

Вот что мне нужно, чтобы запустить функцию если форма действительная , которая отлично работает.

$('#form').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do stuff if form valid
    $("#btn-copy").html('COPY SUCCESS')
    console.log('Text is copied.')
});

Мне нужно запустить функцию, если форма недействительна . Если форма действительна, оба клика и отправки регистрируются, поэтому две функции сталкиваются. Это мой текущий неудачный обходной путь, поскольку, если на кнопке «Действительная форма» будет указано «COPY FAIL», «COPY SUCCESS», «COPY» вместо COPY SUCCESS

$("#btn-copy").click(function(){
    $(this).html('COPY FAIL');
    setTimeout(function(){
        $('#btn-copy').html('COPY');
    },1000);
   console.log('COPY FAIL.')
})

Как запустить функцию , только если кнопка отправки нажата, но форма недействительна (следовательно, отправка не инициируется). И наоборот, если форма верна, запускайте только мою действительную функцию.

ПРИМЕЧАНИЕ. Кнопка должна иметь тип: submit из-за первого действительного кода, который я использовал, если нет других вариантов для достижения того, что я пытаюсь чтобы достичь, так как я не хочу отправлять событие в любом случае, поэтому я делаю event.preventDefault ()

Answer 1

Я предполагаю, что вы используете какой-либо плагин проверки или вручную проверяете проверку формы.

Я создал jsfiddle

HTML Разметка:

<form action="/" id="form">
  <input type="text" id="username" />
  <button type="submit">Submit</button>
</form>

<h2 id="result"></h2>

JS Код:

$('#form').submit(function(event){
    if ($('#username').val().length < 6) {

      // you code if validation failed

        event.preventDefault();
      $("#result").html('COPY FAILED');
    } else {

      // you code if validation succeed and form is valid
      // it will auto submit form, so no need to register 
      // submit and click event separatly.
      $("#result").html('COPY SUCCESS');
    }

});

Answer 2

Если недействительно, при нажатии кнопки отправлять отзыв, если форма недействительна из-за изменения стиля кнопки и текста. Если действует и кнопка нажата, запускаются функции .submit.

$("#btn-copy").click(function(e){
   if(document.getElementById('form-pesan').checkValidity()){
    console.log('form valid and button clicked');
      $(this).html('RUN');        
   }
   else {
    console.log('form invalid and button clicked');
       $(this)
         .html('Please Recheck Form')
         .attr("disabled", true);
       setTimeout( function(){
        $("#btn-copy") 
         .html('RUN')
         .attr("disabled", false);
       },1500);
   }
});

  // Submit is always triggered only if validity is true
  $('#form').submit(function(event){
    // cancels the form submission (personal need).
    event.preventDefault();

    // MY COMMANDS
    $("#btn-copy").html('RUN SUCCESSFULLY');
    console.log('Form is valid and button is pressed');
    setTimeout(function(){
      $('#btn-copy').html('RUN');
     },1000);
  })
})

Answer 3

Я бы использовал ссылку в качестве кнопки, если это так. Вы можете стилизовать это, используя CSS, если хотите. Затем вы можете выполнить проверку, если она нажата. Я сделал быстрый пример, где, если пользователь не вводит имя пользователя длиной не менее 6 символов, форма недействительна, в противном случае она действительна:

<form method="post" action="/some-random-action.html">
  <input type='text' class='form-control' placeholder='username' id="username">
  <small class='form-text text-muted'>Username must be at least 6 characters</small>
  <br>
  <a href="#" class="btn btn-primary" id="submit-btn">
    Submit
  </a>
</form>

Тогда мы можем просто использовать это так нажата для запуска проверки:

$('#submit-btn').on('click', function() {
    if($('#username').val().length < 6) {
        alert("Hey, that username isn't like enough bro");
    }
    else {
        $('form').submit();
    }
});