Question

我有一个表单验证可以正常工作，但是问题是当我单击按钮而不输入任何文本模式时，正在打开，我想要做的是如果文本输入为空并且我单击了“单击我”按钮模式，不来。

JS

<script>
    function validateForm() {
    var x = document.forms["ins_data"]["app_age"].value;
    if (x == "") {
        document.getElementById('app_age_error').innerHTML = "Applicant age is requied";
    return false;
        } else {
            document.getElementById("app_age_error").style.display = "none";
        }
    }
    </script>

HTML

<div id="app_age_error"></div>
<form name="ins_data" onsubmit="return validateForm()">
    <input name="app_age" type="text" placeholder="Age" >
    </form>

    <button type="button" class="btn" data-toggle="modal" data-target="#myModal" onclick="return validateForm()">Click me</button>

    <div class="modal fade" id="myModal" role="dialog" style="margin-top:20px;">
                        <div class="modal-dialog modal-sm">
                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Continue to instant quote</h4>
                            </div>
                            <div class="modal-body">
                                <p style="white-space:normal;">Information</p>
                                <p><input type="text" name="user_name" placeholder="Name" style="padding-left: 10px; height: 25px; border-radius: 5px; border: 1px solid #22ADE3; background-color: #fff; color: #464a4c; font-size: 13px;"></p>
                                <p><input type="text" name="user_email" placeholder="Email" style="padding-left: 10px; height: 25px; border-radius: 5px; border: 1px solid #22ADE3; background-color: #fff; color: #464a4c; font-size: 13px;"></p>
                                <p><input type="text" name="user_contact" placeholder="Contact Number" style="padding-left: 10px; height: 25px; border-radius: 5px; border: 1px solid #22ADE3; background-color: #fff; color: #464a4c; font-size: 13px;"></p>
                            </div>
                            <div class="modal-footer">
                                <input type="submit" name="submit" value="Submit" class="btn insBtn" onclick="valuesInput()" id="enbl_btn" style="margin: 0"/>
                                <input type="submit" value="Cancel" class="btn insBtn" onclick="valuesInput()" id="enbl_btn" style="margin: 0"/>
                              <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
                            </div>
                          </div>
                        </div>
        </div>

Answer 1

您应该从JS（v4.1 docs，v3.3 docs）触发modal：

$('button[type="button"]').on('click', function() {
  if (validateForm())
    $('#myModal').modal();
});

function validateForm() {
  var x = document.forms["ins_data"]["app_age"].value;
  if (x == "") {
    document.getElementById('app_age_error').innerHTML = "Applicant age is requied";
    return false;
  } else {
    document.getElementById("app_age_error").style.display = "none";
    return true;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Styles were stripped and indentation fixed for better readability -->

<div id="app_age_error"></div>

<form name="ins_data" onsubmit="return validateForm()">
  <input name="app_age" type="text" placeholder="Age" >
</form>

<button type="button" class="btn">Click me</button>

<div class="modal fade" id="myModal" role="dialog" style="margin-top:20px;">
  <div class="modal-dialog modal-sm">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Continue to instant quote</h4>
    </div>
    <div class="modal-body">
      <p style="white-space:normal;">Information</p>
      <p><input type="text" name="user_name" placeholder="Name"></p>
      <p><input type="text" name="user_email" placeholder="Email"></p>
      <p><input type="text" name="user_contact" placeholder="Contact Number"></p>
    </div>
    <div class="modal-footer">
      <input type="submit" name="submit" value="Submit" class="btn insBtn" onclick="valuesInput()" id="enbl_btn"/>
      <input type="submit" value="Cancel" class="btn insBtn" onclick="valuesInput()" id="enbl_btn"/>
      <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
    </div>
    </div>
  </div>
</div>

如果验证失败，则不打开引导模式

1 个答案: