javascript - 显示和隐藏元素(jquery/javascript)

我有一个模态，但我不想显示它，除非它完成所有的验证。
所以我试着把它藏在开头，如果它通过了验证过程就显示出来。。
当我单击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>

最佳答案

加载页面时，此时$('#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();
  }
});