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

178

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 >'.$res.'</div>';
  }
  } else {
  //Validations failed. Display Errors.
  $error_hash = $validator->GetErrors();
  $validation_errors = '';
  foreach($error_hash as $inpname => $inp_err) {
    $validation_errors .= '<div >'.$inp_err.'</div>';
  }
 }
 }
?> 
649

Answer

Solution:

Use Javascript'ssetTimeout function, thuswise:

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

Answer

Solution:

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

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

784

Answer

Solution:

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

Answer

Solution:

for example:

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

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

function message() {

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


}

People are also looking for solutions to the problem: php - How to create prototype for REST api in symfony 2

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.