Передача переменной из функции в оператор 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

Следующий код должен решить вашу проблему, вам нужно получить логическое подтверждение из функции и сохранить его.

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

Попробуйте добавить (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);

Answer 3

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

Вы можете попробовать этот код. При нажатии кнопки вы можете установить флаг проверки на истинность, а затем вызвать свою функцию, чтобы проверить, не являются ли поля не пустыми, и если это пустое поле, флаг вернет ложь. Я не проверял этот код, но он должен работать !!

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

Внутри функции 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 (validated == false){
  alert("!!!");
  displayValidationErr();         
} 
else {
  $('#questionBody').submit();
}

это лучший способ начатьс ожидаемым / желаемым поведением:

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

Answer 6

Вы не можете передавать какие-либо параметры в функции обработчика событий. Это, как говорится, вам не нужно в этом случае. Ваша переменная 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 7

ваша область действия отличается, так как в скрипте java переменные поднимаются. Вы можете вызвать функцию validateAll (), которая будет явно возвращать флаг в вашей функции submitbtn