Javascript 验证错误导致无法与页面交互

我有一个表单，其中包含一些字段，但当我提交它时，没有输入任何数据（空），它会在带有黑色覆盖层的一侧提供一个电话验证错误，因此无法再次与页面交互。我希望用户看到消息，他也应该能够与页面交互

/**
*检查电话号码字段的有效性。如果格式不正确，则显示模式弹出窗口。
*/
$（文档）.ready（函数（）{
var form_submitted=错误；
$（“#保存表单”）。单击（函数（）{
如果（提交的表格）{
警报（'正在处理您提交的测验。有时这可能需要一分钟。在重定向到结果页时，请耐心等待'）；
返回false；
}
var phone=$（'#telefon'）.val（）；
变量位置=$（'#state'）.val（）；
变量匹配字符串=/^（[0]{2}）[\+]？[1]（[124；-）？）（\（[0-9]{3}）？[0-9]{3}）（[124；-）（[0-9]{3}（[124；-）？[0-9]{4}）$/；
var phone_match=匹配_string.test（phone.trim（））；
如果（电话=“”）{
$（“#基本模式内容”）.html（'Validation Check电话号码不能为空。
'）；
$（“#基本模态内容”）.modal（）；
返回false；
}否则{
/*添加了针对非美国客户的附加检查。电话号码验证仅针对美国客户。52是非美国in state表的主键*/
如果（位置！=52）{
如果（电话匹配）{
//TODO:取消注释
//$（'save#u form'）.css（“背景”，“url（/images/bodytypequick/BTN BTQ TestResults Processing.png）无重复”）；
//待办事项：在下面两行注释掉
$（'save#u form'）.html（''）；
$（'save#u form'）.css（“left”，“78px”）.css（“width”，“350px”）；
提交的表格=真；
$（“#保存”）.submit（）；
}否则{
$（“#基本模式内容”）.html（'验证检查请输入有效的美国电话号码。
）；
$（“#基本模态内容”）.modal（）；
返回false；
}
}否则{
//TODO:取消注释
//$（'save#u form'）.css（“背景”，“url（/images/bodytypequick/BTN BTQ TestResults Processing.png）无重复”）；
//待办事项：在下面两行注释掉
$（'save#u form'）.html（''）；
$（'save#u form'）.css（“left”，“78px”）.css（“width”，“350px”）；
提交的表格=真；
$（“#保存”）.submit（）；
}
}
});

HTML:

男性
女性
*/ ?>
你现在和你的身体有什么主要的斗争？
你开始多大年纪了*
你住在哪个州*
姓名：*
问题似乎是您正在页面上方打开一个空的模式窗口，窗口中有
$（“#基本模式内容”）.modal（）
调用。如果你检查页面上的元素，我打赌你会发现在所有内容的上方都有一个巨大的div。
那么我应该删除这一行吗？如果你想在模式中显示验证错误，则不可以。模式内容上的CSS没有正确加载。在你的屏幕截图中，它显示在页面底部。我猜是红色的右上角的tton将关闭modal或其他功能？
/**
 * Checks the phone number field validity. Shows a modal popup if the format is not correct.
 */
$(document).ready(function() {
  var form_submitted = false;

  $('#save_form').click(function() {
    if (form_submitted) {
      alert('Your quiz submission is being processed. Sometimes this can take up to a minute. Please be patient while you are redirected to your results page.');
      return false;
    }

    var phone = $('#telefon').val();
    var location = $('#state').val();

    var matching_string = /^(([0]{2})?[\+]?[1]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})?( |-)?([0-9]{3}( |-)?[0-9]{4})$/;
    var phone_match = matching_string.test(phone.trim());

    if (phone == '') {
      $('#basic-modal-content').html('<h3 class="ess_error">Validation Check</h3><p>Phone number cannot be blank.</p>');
      $('#basic-modal-content').modal();
      return false;
    } else {
      /*Added an additional check for the NON US customers. Phone number validation will only happen for US customers. 52 being the primary key for NON US in state table*/
      if (location != 52) {
        if (phone_match) {
          // TODO: Uncomment
          //$('#save_form').css("background", "url(/images/bodytypequiz/BTN-BTQ-TestResults-Processing.png) no-repeat");
          // TODO: Comment out below two lines
          $('#save_form').html('<img src="/images/bodytypequiz/BTQ-OptInSlide-SubmitButtonSubmitMessage-v1.0.png">');
          $('#save_form').css("left", "78px").css("width", "350px");
          form_submitted = true;
          $('#save').submit();
        } else {
          $('#basic-modal-content').html('<h3 class="ess_error">Validation Check</h3><p>Please enter a valid US phone number.</p>');
          $('#basic-modal-content').modal();
          return false;
        }
      } else {
        // TODO: Uncomment
        //$('#save_form').css("background", "url(/images/bodytypequiz/BTN-BTQ-TestResults-Processing.png) no-repeat");
        // TODO: Comment out below two lines
        $('#save_form').html('<img src="/images/bodytypequiz/BTQ-OptInSlide-SubmitButtonSubmitMessage-v1.0.png">');
        $('#save_form').css("left", "78px").css("width", "350px");
        form_submitted = true;
        $('#save').submit();
      }
    }
  });

<div class="col-md-6">
        <?php echo form_tag(url_for('@bodytype_quiz_save'), 'id=save') ?>
        <?php /* <div class="form-group form-inline">
          <label for="age" >In what age range do you fall into?<em class="required">*</em></label>
          <?php echo select_tag('age', options_for_select($age_aria, $form_vars['age']), array('class' => 'form-control')) ?>
          </div>

          <div class="form-group">
          <?php echo radiobutton_tag('sex[]', 1, $form_vars['male']) ?> <label for="sex_1_1">Male</label>
          <?php echo radiobutton_tag('sex[]', 2, $form_vars['female']) ?> <label for="sex_2_2">Female</label>
          </div> */ ?>

        <div class="form-group">
          <label for="comm">What main struggle are you having with your body now?</label>
          <textarea cols="40" rows="4" id="comm" name="comm" class="form-control"><?php echo $form_vars['comm'] ?></textarea>
        </div>

        <div class="form-group form-inline">
          <label for="age">What age did you start gaining? <em class="required">*</em></label>
          <?php echo select_tag('age', options_for_select($age_aria, $form_vars['age']), array('class' => 'form-control')) ?>
        </div>

        <div class="form-group form-inline">
          <label for="state">Which state do you live in? <em class="required">*</em></label>
          <?php echo select_tag('state', options_for_select($st_aria, $form_vars['state']), array('class' => 'form-control')) ?>
        </div>
        <table class="btq-table">
          <tr>
            <td width="22%">
              <label>Name: <em class="required">*</em></label>
            </td>
            <td width="58%">
              <input type="text" id="name" name="name" value="<?php echo $form_vars['name'] ?>" class="form-control" />
            </td>
            <td width="20%">
              <span class="text-tertiary">Kept Private</span>          
            </td>
          </tr>

          <tr>
            <td>
              <label>Email: <em class="required">*</em></label>
            </td>
            <td>
              <input type="text" name="email" id="email" value="<?php echo $form_vars['email'] ?>" class="form-control" />
            </td>
            <td>
              <span class="text-tertiary">Kept Private</span>
            </td>
          </tr>

          <tr>
            <td>
              <label>Cell Phone: <em class="required">*</em></label>
            </td>
            <td>
              <input required type="text" name="telefon" id="telefon" value="<?php echo $form_vars['telefon'] ?>" class="form-control" />
            </td>
            <td>
              <span class="text-tertiary">Kept Private</span>
            </td>
          </tr>
        </table>
        <?php if($error == 1): ?>
        <p><b id="wait" class="red">Some or all of the required fields are empty.</b></p>
        <?php endif;?>
        <div class="form-group text-center">
          <!--<input type="submit" id="submit" name="submit" class="btn btn-tertiary btn-lg" value="ANALYZE" />-->
          <div id="save_form" class="Cursor-pointer" style="background:url(/images/bodytypequiz/BTN-BTQ-TestResults.png) center center;width:320px;height:44px;margin:0 auto;">&nbsp;</div>
        </div>
        </form>
      </div>
      <div class="col-md-6 text-center">
        <h3 class="heading-tertiary">Find Out Your Primary Body Type Now!</h3>
        <div class="thumbnail mb-lg">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo $video_id ?>" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="clearfix"></div>
        <h3 class="heading-tertiary mt-md">Which ONE Is Your Primary Type ?</h3>
      </div>
      <div class="clearfix"></div>
      <div class="text-center mt-lg">
        <small>
          We never give away your email, phone or personal information.<br />
          We'll send you some tips. By proceeding, you agree to our 
          <a href="<?php echo url_for('terms/tacpopup'); ?>" target="_blank">Terms &amp; Conditions</a>
          and <a href="<?php echo url_for('terms/polpopu'); ?>" target="_blank">Privacy Policy</a>.
        </small>
      </div>
      <?php else: ?>
      <div class="text-center">
        <div class="thumbnail col-md-6 col-md-offset-3">
          <!--https://youtube.com/embed/ifaCNwzy0gI?autoplay=1-->
          <iframe width="100%" height="315" src="https://youtube.com/embed/ifaCNwzy0gI" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="col-md-6 text-center col-md-offset-1">
        <h1 class="text-warning text-bold">FREE Adrenal Body Type <br />REPORT</h1>
      </div>
      <div class="col-md-3 text-center col-md-offset-0">
        <a href='javascript://' data-opf-trigger='p2c12528f12' id="open_popup_lnk" class="btn btn-warning btn-block btn-lg text-size-32 text-bold">
          <i class="fa fa-file-pdf-o"></i> View PDF
        </a>
        <script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c12528f12' data-opf-params='borderColor=#fff&borderSize=20px&formHeight=552&formWidth=80%&popPosition=mc&instance=686239622'></script>
      </div>
      <?php endif; ?>
    </div>
  </div>
</div>

<div id="basic-modal-content"></div>