Javascript 在表单验证后激活弹出窗口

Question

我希望在使用表单的提交按钮验证 html 表单后显示一个弹出窗口。我写了一些 JavaScript 并且表单得到了验证，但是弹出窗口没有出现，或者至少它出现了，但立即消失了。下面是 html 和 JavaScript -- 首先，验证表单中的字段，如果为真，则激活弹出窗口。:

HTML

<body>
    <div class="container">
        <div class="req_form" style="margin-top:40px">
            <form name="req_book">
                <table width= "450px">
                    <tr>
                        <td>
                            <label for="book_title">Book Title</label>
                        </td>
                        <td>
                            <input type="text" name="book_title" maxlength="175" size="50" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="author">Full author's name</label>
                        </td>
                        <td>
                            <input type="text" name="author" maxlength="225" size="50" required>
                        </td>                       
                    </tr>                   
                </table>
           <hr>
            <p>Requested by:</p>
                <table width= "450px">
                    <tr>
                        <td>
                            <label for="first_name">First name </label>
                        </td>
                        <td>
                            <input type="text" name="first_name" maxlength="175" size="50" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="last_name">Last name</label>
                        </td>
                    <tr>
                        <td>
                            <input type="submit" id="popupLink" value="Submit"> 
                        </td>                       
                    </tr>                    
                </table>
            </form>
        </div>

        <!-- POPUP BOX -->
        <div id="popupBox" class="popup">
            <!-- Popup content -->
            <div class="popup-content">
                <div class="popup-head">
                    <span class="close">close</span>
                    <h2>Your request for {BOOK_TITLE} has been processed.</h2>
                </div>
                <div class="popup-main">
                    <p>Succes!</p>
                    <p>Your request has been submitted to our library.</p>
                </div>
                <div class="popup-foot">
                    <p><a href="printer_version.html" target="_blank">click here </a>for a printable version on-screen (opens in new tab)</p>
                </div>
            </div>
        </div>
    </div>
</body>

Javascript:

var btn = document.getElementById('popupLink');

function popUp() {
   var popup = document.getElementById('popupBox');

   // get the close action element
   var close = document.getElementsByClassName("close")[0];

   popup.style.display = "block";

   // close the Popup once close element is clicked
   close.onclick = function() {
       popup.style.display = "none";
   }

   // close the Popup when user clicks outside of the box
   window.onclick = function(event) {
       if (event.target == popup) {
           popup.style.display = "none";
       }        
   }
}

btn.addEventListener('click',function validateForm() {
     var isValid = true;
     var htmlFormFieldTitle = document.forms["req_book"]["book_title"].value;
     var htmlFormFieldAuthor = document.forms["req_book"]["author"].value;
     var htmlFormFieldFirst_name = document.forms["req_book"]["first_name"].value;
     var htmlFormFieldLast_name = document.forms["req_book"]["last_name"].value;

     if (htmlFormFieldTitle == "" && htmlFormFieldAuthor =="" && htmlFormFieldFirst_name =="" && htmlFormFieldLast_name =="") {
           alert('some fields are mandatory')
            isValid= false;
                    }
      if (isValid = True){
        popUp();
        }
     });

为什么我的弹出窗口 window 立即消失，我该如何解决？仅包含弹出代码的测试页面确实有效。感谢您的帮助！

Answer 1

当您点击按钮时重新加载页面。为防止这种情况，请添加 e.preventDefault() 添加回调函数的开头。

  btn.addEventListener('click',function validateForm(e) {
    e.preventDefault();
    // ...
  });

文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

除了 Phil 所说的，您的代码中还有三个错误。您忘记包含 last_name 的 HMTL 输入元素，并且您的比较中有两个拼写错误。更正此：

if (isValid = True){
    popUp();
}

对此：

if (isValid == true){
    popUp();
}

JavaScript true 值始终为小写。此外，单个 = 用于赋值，而不是比较。

您可以通过打开 Web 浏览器的控制台自行查看 JavaScript 个错误。

Answer 3

干草亲爱的，当您将提交按钮与表单一起使用时，当您单击提交按钮时，它将提交表单。因此，当提交表单时，它必须调用操作 link。但如果它没有操作 link 页面将重新加载。

你可以做两种方法， 01. 为了避免重新加载页面，你可以使用，

e.preventDefault()

在你的按钮里。点击功能。

或

02 为了避免重新加载页面，您可以使用您的按钮类型为按钮。因此，将按钮类型从提交更改为按钮。因为您使用的是按钮单击方法。

变化：

<input type="submit" />

       To

<input type="button"  />

you can use button type when you capture the click event only. If you are using submit event you have to use submit type as input type.

你可以做一些类似的事情。

Answer 4

我发现了一些问题：

1 - 当有一个表单和一个类型为 "submit" 的按钮时，标记语言会在按钮单击后通过包含 url 中的数据来尝试 post。

URL Before Click: https://foobar.com/index.html
URL After Click: https://foobar.com/index.html?book_title=a&author=a&first_name=a&last_name=a

那么，如何预防呢？

您可以通过事件参数调用preventDefault方法：

btn.addEventListener('click',function validateForm(e) {
    e.preventDefault();
    // ...
});

或者您也可以添加 javascript void(0) 函数操作作为表单属性：

<form name="req_book" action="javascript:void(0)">
<!-- ... -->
</form>

2 - last_name 输入缺失，您需要添加：

<td>
    <input type="text" name="last_name" maxlength="175" size="50" required/>
</td>

3 - Javascript 区分大小写，所以让我们修复它：

btn.addEventListener('click',function validateForm() {
    // ...
    if (isValid == true) {
        popUp();
    }
}

Javascript 在表单验证后激活弹出窗口

Javascript activate pop up after form validation

javascript

validation

popup