输入验证后弹出并提交 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

您可以将按钮单击弹出事件移动到 jQuery 验证 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";
                }
            }
        });
    });

这样弹窗会在验证通过后出现

Answer 2

您可以将按钮类型设置为button。现在按钮不会提交表单。相反，您可以运行一些 JS 在单击按钮时提交表单。你可以在 vanilla 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>

输入验证后弹出并提交 Javascript

PopUp after input validation and submit Javascript

html

javascript

validation

jquery

popup