将变量从函数传递到 if 语句

Question

我在表单上有一个提交按钮，我为其分配了一个功能来检查必填字段和可见字段。在遇到空字段时，它应该向字段添加一个类，以及显示和错误消息。我有这个 jquery 脚本：

$(".submitBtn").click(function(validateAll) {
  if (validated = false) {
    alert("!!!");
    displayValidationErr();
  } else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ($(this).val() === '') {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });
}

function displayValidationErr() {
  $("#validationError").fadeTo(2000, 600).slideUp(600, function() {
    $("#validationError").slideUp(600);
  });
}

单击按钮后，我无法进一步从“validateAll”函数传递变量。函数本身可以正常工作，但不适用于 if\else。 我对这些东西很陌生，所以请放轻松。 :)

谢谢！

Answer 1

在您的validateAll 函数中，您定义了validated，它创建了一个仅限于该函数的函数范围。您可以创建一个全局变量，也可以只给出一个返回值。

全局变量方法：

var validated = true; // in the same scope as your two functions

$( ".submitBtn" ).click(function(){
  validated = true;
  validateAll();

  if (validated == false){ // make sure double "=" is set
    alert("!!!");
    displayValidationErr();         
  } 
  else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  // var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ( $(this).val() === '' ) {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });
}

返回方式：

$( ".submitBtn" ).click(function(){
  validated = validateAll();

  if (validated == false){
    alert("!!!");
    displayValidationErr();         
  } 
  else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ( $(this).val() === '' ) {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });

  return validated;
}

另外，对于更易于阅读的代码的小提示：人们往往更喜欢积极优先的 if 块，因此不要像这样以双重否定 if 条件开头：

if (validated == false){
  alert("!!!");
  displayValidationErr();         
} 
else {
  $('#questionBody').submit();
}

从预期/想要的行为开始的最佳实践：

if (validated) {
  $('#questionBody').submit();
} 
else {
  alert("!!!");
  displayValidationErr();         
}

Answer 2

您不能将任何参数传递给事件处理函数。话虽这么说，在这种情况下你不需要。您的validated 变量也仅在validateAll() 中定义，因此无法从click 处理程序访问。

要解决此问题，您可以使validateAll() 返回布尔值以指示表单是否有效，然后在直接调用validateAll() 函数后在click 事件处理程序中处理该响应。试试这个：

$(".submitBtn").click(function() {
  if (!validateAll()) {
    alert("!!!");
    displayValidationErr();
  } else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ($(this).val() === '') {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });
  return validated;
}

最后要注意的是，= 用于设置值，而== 或=== 用于比较值。您原来的if 语句不会像您预期的那样工作，因为您使用的是=。

Answer 3

您的函数范围不同，因为在 java 脚本中变量被提升。 您可以调用您的 validateAll() 函数，该函数将在您的 submitbtn 函数中显式返回标志

Answer 4

您有一个“范围问题”：您的 validated 变量仅在 validateAll() 中可用。

您可以将其设为“全局”（不推荐）或从validateAll() 返回，然后在 submitBtn 顶部显式调用并检查结果。

$(".submitBtn").click(function() {    
  // call validateAll() and check the result  
  if (validateAll() == false) {
    alert("!!!");
    displayValidationErr();
  } else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ($(this).val() === '') {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });
  
  // return the result
  return validated;
}

function displayValidationErr() {
  $("#validationError").fadeTo(2000, 600).slideUp(600, function() {
    $("#validationError").slideUp(600);
  });
}

Answer 5

$(document).ready(function(){
var validated;
$( ".submitBtn" ).click(function(){
   validated = true;
   validateAll();
   if(!validated){
     alert("!!!");
     displayValidationErr();         
   } else {
     $('#questionBody').submit();
   }
});

function validateAll() {
  $('.form-control').filter('[required]:visible').each(function() {
    if ( $(this).val() === '' ) {
        $(this).addClass("emptyRequired");
        validated = false;
    }
  });

}

function displayValidationErr() {
  $("#validationError").fadeTo(2000, 600).slideUp(600, function(){
  $("#validationError").slideUp(600);
});
}

你可以试试这个代码。单击按钮时，您可以使验证标志为真，然后调用您的函数来检查字段是否为空，如果其为空字段，则该标志将返回 false。我没有测试过这段代码，但它应该可以工作！！

Answer 6

以下代码应该可以解决您的问题，您需要从函数中获取布尔值并存储它。

$(".submitBtn").click(function() {
  var validated = validateAll()
  if (validated == false) {
    alert("!!!");
    displayValidationErr();
  } else {
    $('#questionBody').submit();
  }
});

function validateAll() {
  var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ($(this).val() === '') {
      $(this).addClass("emptyRequired");
      validated = false;
    }
  });
  return validated;
}

Answer 7

尝试在代码周围添加(function($){//yoursnippet})(jQuery);，如下所示：

(function($){
$( ".submitBtn" ).click(function(validateAll){
   if(validated = false){
	 alert("!!!");
     displayValidationErr();         
   } else {
     $('#questionBody').submit();
   }
});

function validateAll() {
	var validated = true;
  $('.form-control').filter('[required]:visible').each(function() {
    if ( $(this).val() === '' ) {
        $(this).addClass("emptyRequired");
		validated = false;
	}
  });
  
}

function displayValidationErr() {
  $("#validationError").fadeTo(2000, 600).slideUp(600, function(){
  $("#validationError").slideUp(600);
});

}
})(jQuery);