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

问题描述

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

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

HTML：

<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>

标签： javascriptvalidationbootstrap-modal

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

问题描述

解决方案

推荐阅读