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

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

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

$(".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 2

在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块，因此，而不是像下面这样以double负的条件开始：

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

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

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

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);
});
}

您可以尝试使用此代码。单击按钮时，可以使验证标志为true，然后调用函数以检查字段是否为空，如果字段为空，则该标志将返回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);

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

7 个答案: