输入验证后弹出并提交Javascript答案

【问题标题】：PopUp after input validation and submit Javascript输入验证后弹出并提交Javascript
【发布时间】：2020-03-02 09:58:51
【问题描述】：

我有以下简单的表格

<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());
                    }
                });
            });

我想要做的是，如果我点击按钮，弹出窗口将在验证后显示

【问题讨论】：

你想使用弹窗的原因是什么？
向用户显示，数据已经处理过了，没用吧？ ikr，但是有了这个我可以了解更多关于 javascript
您必须将表单标记为已在服务器上发布，因为提交后页面会重新加载。前任。当响应是针对 POST 时，向表单添加一个隐藏字段。然后在JS中检查该字段是否存在，如果存在则显示弹窗。
如果在重新加载页面之前弹出窗口会显示一点点，因为我在将数据提交到数据库之前进行了延迟，即使使用 GET 方法弹出窗口仍然不显示

标签： javascript jquery html validation popup

【解决方案1】：

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

这样验证通过后会弹出弹窗。

【讨论】：

哈哈哈，对不起，它确实有效，我刚刚意识到 element.value == '' 没有定义
另外 1 个弹出窗口确实出现了，但系统没有将其提交到数据库，它只是停留在弹出窗口上并且不会继续 POST
没关系在modal.style.display = "block";之后使用$form.submit();

【解决方案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 )
  });
}

&lt;button type="submit" id="myBtn" name="create" class="btn btn-danger"&gt;Create&lt;/button&gt;

【讨论】：