Question

我有一个名为“.error”的div，如果提交了注册表单并且有错误则会出现，否则不会出现。我正在尝试使用jquery创建一个使用if结构的javascript语句。

For example

if error div is visible after submit button is clicked

remove the error div after several seconds

end if statement

任何帮助将不胜感激

谢谢！

编辑这是我的实际代码，我已尝试实施一些提供的示例但到目前为止都没有。

<script>
   $(document).ready(function(){
   var hideError = function () {
   $(".error").hide();
};

$("registration-form").submit(function () {
    setTimeout(hideError, 5000);
});

});
</script>

<?php
   $validation_errors = '';
   $proc_errors = '';
   if (isset($_POST['register'])) { // User submitted registration form
   require_once "formvalidator.php";
   $validator = new FormValidator();
   $validator->addValidation("new-username","req","Please enter a username");
   $validator->addValidation("new-username","minlen=5","Username cannot be less than 5           characters");
   $validator->addValidation("new-username","maxlen=25","Username cannot be more than 25 characters");
   $validator->addValidation("new-username","alpha","Username must not contain spaces, numbers or strange characters");

   $validator->addValidation("new-password","req","Please enter a password");
   $validator->addValidation("new-password","minlen=5","Password must be at least 5 characters!");
   $validator->addValidation("new-password","maxlen=25","Password cannot be more than 25 characters");

   $validator->addValidation("new-password2","eqelmnt=new-password","The confirmation password does not match");
   $validator->addValidation("new-password2","req","Please enter the confirm password field");

   $validator->addValidation("email","email","Please enter a valid e-mail address");
   $validator->addValidation("email","req","Please enter a valid e-mail address");

   $validator->addValidation("forename","req","Please enter your forename");

   $validator->addValidation("surname","req","Please enter your surname");

   $validator->addValidation("securityquestion","dontselect=--Select One--","Please choose a security question");

   $validator->addValidation("securityanswer","req","Please enter a security answer");
   $validator->addValidation("securityanswer","minlen=5","Security answer must be more than 4 characters");

   if($validator->ValidateForm()) {
    //If the validations succeeded, proceed with form processing
    $formproc = new regProcessor();
    $res = $formproc->ProcessForm();
    if($res == "SUCCESS") {
        header("Location: registrationsuccess.php"); /* Redirect browser */
        exit();
    } else {
        $proc_errors = '<div class="error">'.$res.'</div>';
    }
   } else {
    //Validations failed. Display Errors.
    $error_hash = $validator->GetErrors();
    $validation_errors = '';
    foreach($error_hash as $inpname => $inp_err) {
       $validation_errors .= '<div class="error">'.$inp_err.'</div>';
    }
  }
 }
?>

Answer 1

要隐藏div，请创建一个使用jQuery hide的下面的函数。

var hideError = function () {
    $(".error").hide();
};

（即使错误div已被隐藏，你也可以安全地调用它）

在提交表单时（使用jQuery submit事件处理程序）调用它，但在通过setTimeout延迟5秒后调用它。

$("form").submit(function () {
    setTimeout(hideError, 5000);
});

这意味着如果用户通过单击提交按钮提交表单，则会隐藏任何验证消息，但是如果他们通过在键盘上按 Enter 来执行此操作

Answer 2

使用Javascript的setTimeout函数，从而：

setTimeout(function() {
      // remove your error div
}, 5000);

Answer 3

例如：

<div id="message"></div>

<button type="submit" onclick="message();">submit</button>

function message() {

 $('#message').show();
 setTimeout(function() { $('#message').hide(); }, 5000);


}

Answer 4

$("button").click(function(){
    if ($("div").css("visibility","visible")) {
        setTimeout(function(){$("div").css("visibility","hidden")},2000)
    }
})

如果您使用visibility隐藏此消息，则此功能将起作用，如果不是，则相应地更改相关部分，如果您需要帮助，请询问

Answer 5

如果你想要一个更jQuery惯用的方法，那么扩展jQuery：

定义jQuery扩展函数：

$.fn.delayedHide = function(delay) {
  var that = this;
  window.setTimeout(function () {
    that.hide();
  }, delay || 5000);
  return that;
}

现在假设你有以下HTML：

<div class="msg">MSG1</div>
<div class="msg msg-err">MSG2 (ERR)</div>
<div class="msg">MSG3</div>
<div class="msg msg-err">MSG4 (ERR)</div>

然后，您可以使用

一次隐藏所有错误消息

$(".msg-err").delayedHide();

完整示例：http://jsfiddle.net/8wh4h/1/

Answer 6

为了实现平滑过渡，您可以在淡入后使用jQuery fadeIn / fadeOut函数并延迟。

$('.error').fadeIn(600, function() {
    $(this).delay(4000).fadeOut(600);
});

使得div在5秒后消失，验证错误消息

6 个答案: