I've created a form that is split into 2 DIVs. When the user clicks the NEXT button, I want to do 2 things: 1. Validate the text fields in the first DIV, and if successful; 2. Hide the first DIV and fadein the second DIV (if validation fails, show a message, and prevent the display of the 2nd part of the form).
I've stripped down my code. This is the script that currently hides the first DIV when clicking on an image button. I do not know how to modify this script to execute the validation on the fields, preventing the first DIV from hiding and the second one showing:
<script>
$(document).ready(function(){
$("img.nextlink").click(function (event) {
$("#partone").hide();
$("#parttwo").fadeIn("slow");
});
</script>
The Form is as follows:
<form action="mail.php" method="post" enctype="multipart/form-data" name="registration">
<div id="partone">
Name:* <input type="text" name="customer_name" id="customer_name" />
<img src="images/arrow.png" id="arrow" class="nextlink" alt="next">
</div>
<div id="parttwo">
Address*: <input type="text" name="address" id="address" />
<INPUT TYPE="image" src="images/arrow.png" alt="Submit">
</div>
</form>
CSS:
div#partone {
}
div#parttwo {
display: none;
}