javascript - Making a div dissapear after 5 seconds, validation error message
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>';
}
}
}
?>
Answer
Solution:
To hide the div, create a function such as the one below that uses jQuery
.
(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.
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.
Answer
Solution:
Use Javascript's
setTimeout
function, thuswise:Answer
Solution:
This will work if you have hidden this message using
visibility
if not then change relevant parts accordingly, if you need help just askAnswer
Solution:
If you want a more jQuery idiomatic approach, then extent jQuery:
Define an jQuery extension function:
Now suppose you have the following HTML:
Then you can hide all error messages at once with
Full example: http://jsfiddle.net/8wh4h/1/
Answer
Solution:
For a smooth transition you could use the jQuery fadeIn/fadeOut functions with a delay after fading in.
Answer
Solution:
for example: