javascript - Making a div dissapear after 5 seconds, validation error message - Stack Overflow

admin管理员组

文章数量:1390571

I have a div called ".error" which appears if an registration form is submitted and it has errors, it doesn't appear otherwise. I am trying to make a javascript statement incorporating jquery which uses an if structure.

For example

if error div is visible after submit button is clicked

remove the error div after several seconds

end if statement 

Any help would be appreciated

Thanks!

Edit: Here is my actual code, I have tried implementing some of the examples provided but none have worked thus far.

<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>';
    }
  }
 }
?>  

I have a div called ".error" which appears if an registration form is submitted and it has errors, it doesn't appear otherwise. I am trying to make a javascript statement incorporating jquery which uses an if structure.

For example

if error div is visible after submit button is clicked

remove the error div after several seconds

end if statement 

Any help would be appreciated

Thanks!

Edit: Here is my actual code, I have tried implementing some of the examples provided but none have worked thus far.

<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>';
    }
  }
 }
?>  

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow edited Feb 4, 2014 at 16:23 display-name-is-missing 4,40955 gold badges3030 silver badges4242 bronze badges asked Feb 4, 2014 at 15:16 user2320010user2320010 9511 silver badge88 bronze badges 3

• I appreciate all the feedback, I will have a go with what has been said, the divs are being generated with PHP, they don't pre-exist on the HTML. – user2320010 Commented Feb 4, 2014 at 15:32
• If the divs are being generated by PHP (i.e. on the server) doesn't this mean that they exist when the page is initially rendered to the browser? – Richard Ev Commented Feb 4, 2014 at 16:43
• See, thats what I thought too which has led me going this method of removing it. The code three quarters down the php is where the div is being made, it begins with if($res=="SUCCESS"){ – user2320010 Commented Feb 4, 2014 at 16:44

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

To hide the div, create a function such as the one below that uses jQuery hide.

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

(you can safely call this even if the error div is already hidden)

Call it when your form is submitted (with a jQuery submit event handler), but after a 5 second delay by means of setTimeout.

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

This means that any validation message will be hidden if the user submits the form by clicking the Submit button, but also if they do so by pressing Enter on their keyboard.

Use Javascript's setTimeout function, thuswise:

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

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

This will work if you have hidden this message using visibility if not then change relevant parts accordingly, if you need help just ask

If you want a more jQuery idiomatic approach, then extent jQuery:

Define an jQuery extension function:

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

Now suppose you have the following 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>

Then you can hide all error messages at once with

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

Full example: http://jsfiddle/8wh4h/1/

For a smooth transition you could use the jQuery fadeIn/fadeOut functions with a delay after fading in.

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

for example:

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

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

function message() {

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


}

本文标签： javascriptMaking a div dissapear after 5 secondsvalidation error messageStack Overflow