堆栈内存溢出
  简体   繁体   English

表单验证后如何显示模态？

[英]How to show modal after validation of form?

 原文  2020-07-28 06:04:16  5   2    javascript

问题描述

I want that after submission of form and check empty field(validation) a message(on modal) will popup with message "Fill out all the form."?我希望在提交表单并检查空字段（验证）后会弹出一条消息（在模式上），并显示消息“填写所有表单。”？ How to do this.这个怎么做。 I tried but it doesn't show error but it also not running.我试过了，但它没有显示错误，但它也没有运行。 If anyone know please tell what is missing or correct it how to do this.如果有人知道，请告诉遗漏或纠正它如何做到这一点。

<!-- language: lang-html -->
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript">
<!-- language: lang-js -->
    function signup(){
    var fName=document.getElementById("txtName").value;
    var email=document.getElementById("txtEmail").value;
    var password=document.getElementById("txtPassword").value;
    var mobile=document.getElementById("nMobile").value;

    if(fName=="" || email=="" || password=="" || mobile==""){
    $("#valdMsg").modal("show");
    }
    }
</script>
    </head>
    <body>
    <div class="modal fade" id="valdMsg" tabindex="-1" role="modal">
      <div class="modal-dialog" role="document">
        <div class="modal-header">
          <h5>Warning!</h5>
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        </div>
        <div class="modal-body">
        Fill out all forms.
        </div>
      </div>
    </div>
    <form>
    <div style="margin-bottom:10px;">
    <label for="txtName">Full Name</label>
    <input type="text" id="txtName"/>
    </div>
    <div style="margin-bottom:10px;">
    <label for="txtEmail">Email</label>
    <input type="email" id="txtEmail"/>
    </div>
    <div style="margin-bottom:10px;">
    <label for="txtPassword">Password</label>
    <input type="text" id="txtPassword"/>
    </div>
    <div style="margin-bottom:10px;">
    <label for="nMobile">Mobile Number</label>
    <input type="number" id="nMobile"/>
    </div>
    <div>
    <button type="submit" id="sign_up" onclick="signup()">
    Sign Up
    </button>
    </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
      </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </body>
    </html>
<!-- end snippet -->

2 个解决方案

解决方案1
 0  2020-07-28 06:23:40

  1. Dont Use multiple JQuery Instance in your file不要在您的文件中使用多个 JQuery 实例
  2. Please check your Jquery file,Some CDN files Wont Work Properly请检查您的 Jquery 文件，某些 CDN 文件无法正常工作
  3. Please always keep in mind that order of import,First we have to import jquery then only we need to import all other Javascript library请始终记住导入顺序，首先我们必须导入 jquery 然后我们只需要导入所有其他 Javascript 库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

解决方案2
 0  2020-07-28 06:44:11

Apart from points mentioned by @vasanth, i've changed button type from submit to button, that has resolved the issue除了@vasanth 提到的几点，我已经将按钮类型从提交更改为按钮，这已经解决了问题

    <!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <form>
        <div style="margin-bottom:10px;">
            <label for="txtName">Full Name</label>
            <input type="text" id="txtName" />
        </div>
        <div style="margin-bottom:10px;">
            <label for="txtEmail">Email</label>
            <input type="email" id="txtEmail" />
        </div>
        <div style="margin-bottom:10px;">
            <label for="txtPassword">Password</label>
            <input type="text" id="txtPassword" />
        </div>
        <div style="margin-bottom:10px;">
            <label for="nMobile">Mobile Number</label>
            <input type="number" id="nMobile" />
        </div>
        <div>
            <button type="button" id="sign_up" onclick="signup()">
                Sign Up
            </button>
        </div>
    </form>
    <div class="modal" id="valdMsg" tabindex="-1" role="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-header">
                <h5>Warning!</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                Fill out all forms.
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <script>
        function signup() {
            var fName = document.getElementById("txtName").value;
            var email = document.getElementById("txtEmail").value;
            var password = document.getElementById("txtPassword").value;
            var mobile = document.getElementById("nMobile").value;

            if (!fName || !email || !password || !mobile) {
                $("#valdMsg").modal();
            }
        }
    </script>
</body>

</html>
<!-- end snippet -->

note: It is trying to submit form after opening modal thats y modal is getting closed注意：它试图在打开模态后提交表单，即 y 模态正在关闭

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 表单验证失败后如何显示模式？ - How can I show a modal after failed form validation? 表单验证检查后不显示模态框 - Modal box not show after form validation check 在表单验证中显示模态 - Show Modal on form validation 如何通过验证形成提交显示模式弹出窗口 - how to form submit show modal popup with validation 验证后如何显示引导模态窗口？ - How to show a bootstrap modal window after validation? 仅在验证检查和表单提交后显示模态 - Only show modal after validation check and form has been submitted jQuery代码在完成表单验证后显示模式 - Jquery code to show modal after form validation is done 在Rails中提交bootstrap模态窗体后，如何显示有错误的模态？ - After submitting bootstrap modal form in Rails, how to show modal with errors? 验证后的JavaScript切换模式显示 - JavaScript toggle modal show after validation PHP/JavaScript 如何在提交表单后显示模态 - PHP/JavaScript How to show modal after submitting a form
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM