onclick 事件不能同时用于多个功能

问题描述

点击事件

<button type="submit" value="submit" class="login100-form-btn" onClick="this.validate-input">
Create Account
</button>

和

<button type="submit" value="submit" class="login100-form-btn" onClick="this.disabled=true">
Create Account
</button>

单独工作，但

<button type="submit" value="submit" class="login100-form-btn" onClick="this.validate-input; this.disabled=true">
Create Account
</button>

不能一起工作。请建议我如何

• 验证输入。
• 点击后禁用按钮。 一起
  

编辑

我已从 colorlib.com 下载此代码。当我同时单击提交按钮两次时，它会出错。所以我想在点击后禁用提交按钮。

请查看我的 jQuery

var input = $('.validate-input .input100');

$('.validate-form').on('submit',function() {
  var check = true;

  for (var i = 0; i < input.length; i++) {
    if (validate(input[i]) == false) {
      showValidate(input[i]);
      check = false;
    }
  }

  return check;
});


$('.validate-form .input100').each(function() {
  $(this).focus(function() {
    hideValidate(this);
  });
});

function validate(input) {
  if ($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
    if ($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
      return false;
    }
  } else {
    if ($(input).val().trim() == '') {
      return false;
    }
  }
}

function showValidate(input) {
  var thisAlert = $(input).parent();

  $(thisAlert).addClass('alert-validate');
}

function hideValidate(input) {
  var thisAlert = $(input).parent();

  $(thisAlert).removeClass('alert-validate');
}

解决方法

您可以在验证功能中添加禁用提交按钮。

$('.validate-form').on('submit',function() {
  var check = true;

  for (var i = 0; i < input.length; i++) {
    if (validate(input[i]) == false) {
      showValidate(input[i]);
      check = false;
    }
  }
  if (check) {
    $(this).find(":submit").prop("disabled",true);
  }
  return check;
});