javascript - 单击按钮后验证不同的输入

Question

我有一个包含姓名和电子邮件值以及验证集的表单。

HTML:

  <fieldset class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Name">
    <div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div>
  </fieldset>
  <!--name-->

   <fieldset class="form-group">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" placeholder="E-mail">
      <div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div>
   </fieldset>
   <!--email-->

<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button> 

JS

var nameWarning = $(".yellow");
var emailWarning = $(".red");
$("#submitPaymentButton").prop("disabled", true);

emailWarning.hide();
nameWarning.hide();

$(document).ready(function() {

  /****************************
  Name validation
  ******************************/
  $("#name").focusout(function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-warning");
      nameWarning.hide();
      validateAllInputs();

    } else if ($(this).val().length < 2) {
      $(this).parent().addClass("has-warning");
      nameWarning.show();
    }
  })

  /* If the user focuses in we hide the warnings, this is optional */
  $("#name").focusin(function() {
    $(this).parent().removeClass("has-warning");
    nameWarning.hide();
  });

  /******************************* 
  E-mail fom validation
  ******************************/
  $("#email").focusout(function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      validateAllInputs();
      console.log("hide the warnings");

    } else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      console.log("hide the warnings");
    } else {
      $(this).parent().addClass("has-danger");
      emailWarning.show();
      console.log("show the warnings");
    }
  })

  /* If we are inside the form, just hide the warnings as the user is typing.*/
  $("#email").focusin(function() {
    $(this).parent().removeClass("has-danger");
    emailWarning.hide();
  });

这按预期工作，但是当我想添加一个按钮时，问题就出现了，按下该按钮时，验证两个输入，如果两个输入没有警告类，则允许提交，因此它们没有错误，“if”有效，但“else”从未触发，我做错了什么？:

  function validateAllInputs() {
    if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) {
      $("#submitPaymentButton").prop("disabled", false);
      console.log("disabled");
    } else {
      $("#submitPaymentButton").prop("disabled", true);
      console.log("enabled");
    }
  }

Answer 1

试试这个......

1:我使用了焦点和模糊事件

2:您的示例中缺少以下条件下的 validateAllInputs() 调用

 else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      console.log("hide the warnings");

var nameWarning = $(".yellow");
var emailWarning = $(".red");
$("#submitPaymentButton").prop("disabled", true);

emailWarning.hide();
nameWarning.hide();

$(document).ready(function() {

  /****************************
  Name validation
  ******************************/
  $("#name").on("blur",function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-warning");
      nameWarning.hide();
      validateAllInputs();

    } 
    else if ($(this).val().length < 2) {
      $(this).parent().addClass("has-warning");
      nameWarning.show();
    }
  })

  /* If the user focuses in we hide the warnings, this is optional */
  $("#name").on("focus",function() {
    $(this).parent().removeClass("has-warning");
    nameWarning.hide();
  });

  /******************************* 
  E-mail fom validation
  ******************************/
  $("#email").on("blur", function() {
    if ($(this).val().length === 0) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      validateAllInputs();
      console.log("hide the warnings");

    } else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
      validateAllInputs();
      console.log("hide the warnings");
    } else {
      $(this).parent().addClass("has-danger");
      emailWarning.show();
      console.log("show the warnings");
    }
  })

  /* If we are inside the form, just hide the warnings as the user is typing.*/
  $("#email").on("focus",function() {
    $(this).parent().removeClass("has-danger");
    emailWarning.hide();
  });
 
  });

function validateAllInputs() {  
    if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) {
     $("#submitPaymentButton").prop("disabled", false);
      console.log("disabled");
    } else {
      $("#submitPaymentButton").prop("disabled", true);
      console.log("enabled")
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Name">
    <div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div>
  </fieldset>
  <!--name-->

   <fieldset class="form-group">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" placeholder="E-mail">
      <div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div>
   </fieldset>
   <!--email-->

<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button>