提交按钮上的表单验证可导致表单的另一部分

Question

我在iframe中分为两部分。表单的第一部分具有一个“提交”按钮，该按钮具有一个事件侦听器，当单击该按钮时，它会指向iframe的第2页（表单的第2部分）。提交是在检查验证之前注册事件监听器modalInitialCta.addEventListener('click', openModalSelector);。我需要它来检查验证，然后是openModalSelector。请帮忙！先感谢您！

这是HTML的第一部分：

<form id="theForm" onsubmit="return checkForm(this);"> 
<table class="inputFieldSet">
    
    <tr class="leftAligned">
        <td class="leftAlignedL">
        <p class="inputTitleL">First Name</p>
        <input class="fillableFieldL" type="text" name="first-name" onfocus="this.value=''" pattern="^[a-zA-Z ,.'-]+$" required>
        </td>
        <td class="leftAlignedL">
        <p class="inputTitleL">Last Name</p>
        <input class="fillableFieldL" type="text" name="last-name" onfocus="this.value=''" pattern="^[a-zA-Z ,.'-]+$" required>
        </td>
    </tr>
    
    <tr class="leftAligned">
        <td class="cell">
        <p class="inputTitle">Email</p>
        <input class="fillableField" type="email" name="email" onfocus="this.value=''" required>
        </td>
    </tr>
    
    <tr class="leftAligned">
        <td class="cell">
        <p class="inputTitle">Password</p>
        <input class="fillableField" type="password" name="password" onfocus="this.value=''" required>
        </td>
    </tr>
    
</table>

<div class="form">
<p><input external-event="submit" id="modal-initial-cta" class="submit" type="submit" value="START CLIMBING TODAY" onSubmit="return openModalSelector"></p>
</div>  
</form>

这是关于按钮的Javascript：

let modalInitialCta = document.getElementById('modal-initial-cta');

function openModalSelector () {
    modalInitial.style.display = "none";
    modalInstructions.style.display = "none";
    modalSelector.style.display = "block";
  }

modalInitialCta.addEventListener('click', openModalSelector);