Question

我有一个模态，但除非它结束所有验证，否则我不想显示它。

所以我试图在开头隐藏它并在它通过验证过程时显示它。

当我点击btnSubmit

时，我的代码仍会显示模态

$('#btnSubmit').click(function(e) {
  e.preventDefault();
  $('#creationModal').modal('hide');
  //if the flow is not validated
  var flowName = $('#flowName').val();
  //check if it exists
  validateFlowName(flowName);
});

function validateFlowName(flowName) {

  if //some validation processes) 

  {

  } 
//if passes all validations, show it
  else {

    $('#creationModal').modal('show');

  }

<button type="submit" class="btn btn-rounded btn-success-outline top10" data-target="#creationModal" data-toggle="modal" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Answer 1

尝试从按钮中删除data-target =“＃creationModal”data-toggle =“modal”：

<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Answer 2

从按钮中删除data-target="#creationModal" data-toggle="modal"代码行，因为此行将打开模式。如果您想直接打开模态，则需要以上行。

<button type="submit" class="btn btn-rounded btn-success-outline top10" id="btnSubmit"><span class="fa fa-plus"></span> Create</button>

Answer 3

当页面加载时，$('#creationModal').hide()将隐藏您的元素，然后您将点击按钮$('#btnSubmit').click(function(e)将会调用。在此功能中，您可以检查以下条件：

$('#creationModal').hide();

$('#btnSubmit').click(function(e) {
  e.preventDefault();
  //if the flow is not validated
  var flowName = $('#flowName').val();
  //check if it exists
  if(flowName) {
    $('#creationModal').show();
  }
  else {
    $('#creationModal').hide();
  }
});

显示和隐藏元素（jquery / javascript）

3 个答案: