Всплывающее окно после подтверждения ввода и отправки Javascript

Question

У меня есть следующая простая форма

<form action="#" method="POST" id="minimum" class="barrier">
  <section class="col col-5">
    <label class="label">Minimum Item</label>
        <label class="input">
            <i class="icon-append fa fa-minus-square"></i>
            <input type="text" name="minimum" autocomplete="off">
        </label>
</section>
<button type="submit" id="myBtn" name="create" class="btn btn-danger">Create</button>
    <div id="myModal" class="modall">
        <!-- Modal content -->
        <center>
            <div class="modall-content">
                <span class="close">&times;</span>
                <p>Please Wait while Processing.</p>
            </div>
        </center>
    </div>
</form>

и javascript:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    var setok = document.getElementById("setok");
    if (typeof setok !== "undefined" && element.value == '') {
    modal.style.display = "block";
    }
}

форма проверки работает отлично и не может быть отправлена, пока пользователь не заполнит ее с правильным условием Однако после нажатия кнопки «Отправить» всплывающее окно не отображается

. Вот мой сценарий проверки:

$(function()
            {
                // Validation
                $("#form").validate(
                {                   
                    // Rules for form validation
                    rules:
                    {
                        minimum:
                        {
                            required: true,
                            digits: true
                        }
                    },
                    messages:
                    {
                        minimum:
                        {
                            required: 'Please Enter only digits!',
                            digits: 'Please Enter only digits!'
                        }
                    },                  

                    errorPlacement: function(error, element)
                    {
                        error.insertAfter(element.parent());
                    }
                });
            });

, что я хочу сделать, это нажать кнопку всплывающее окно появится после проверки

Answer 1

Вы можете установить тип кнопок на button. Теперь кнопка не будет отправлять форму. Вместо этого вы можете запустить JS для отправки формы при нажатии на кнопку. Вы можете сделать это в ванили JS, jQuery или как угодно.

document.addEventListener('click', () => {
  // Retreive the data from the form..
  //NOTE: you can implement your popup instead of the alert
  myFakeRequest()
  .then( response => alert(response) )
  .catch( error => alert( error ) )
});

// this just simulates a request delaythat fails half the time
function myFakeRequest() {
  return new Promise( (resolve, reject ) => {
    window.setTimeout( () => {
    if( Math.random() > 0.5 )
      resolve( 'YAY, successfull request' );
    else
      reject( 'Oh no... The request didn\'t work' );
    }, 1000 )
  });
}

<button type="submit" id="myBtn" name="create" class="btn btn-danger">Create</button>

Answer 2

Вы можете переместить всплывающее событие щелчка кнопки в jQuery validate submitHandler метод:

    $(function() {
        // Validation
        $("#form").validate({
            // Rules for form validation
            rules: {
                minimum: {
                    required: true,
                    digits: true
                }
            },
            messages: {
                minimum: {
                    required: 'Please Enter only digits!',
                    digits: 'Please Enter only digits!'
                }
            },

            errorPlacement: function(error, element) {
                error.insertAfter(element.parent());
            },

            submitHandler: function() {
                var setok = document.getElementById("setok");
                if (typeof setok !== "undefined" && element.value == '') {
                    modal.style.display = "block";
                }
            }
        });
    });

Таким образом, всплывающее окно будет отображаться после прохождения проверки.