CODEWITHSUNDEEP
phpjqueryformsvalidation
MacGyver_97
MacGyver_97

Reputation: 229

Jquery validation of a form split across multiple hidden DIVs

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

Upvotes: 0

Views: 1039

Answers (2)

MacGyver_97
MacGyver_97

Reputation: 229

Aha! Yes. It works as follows:

function validateFirstPart() {
  if($('#customer_name').val().length < 1){
    alert("Too short customer name");
    return false;
  }
  if($('#ranch').val().length < 1){
    alert("Too short ranch name");
    return false;
  }
  return true;
}


$(document).ready(function(){
    $("img.nextlink").click(function (event) {
        if(validateFirstPart()){
            $("#partone").hide();
            $("#parttwo").fadeIn("slow");
        }
});

Upvotes: 0

Lasse
Lasse

Reputation: 431

Just put the hide() and fadeIn() inside a if clause that checks if the first part of the form is valid.

function validateFirstPart() {
  if($('#customer_name').val().length < 1){
    alert("Too short customer name");
    return false;
  }

  return true;
}

$(document).ready(function(){
    $("img.nextlink").click(function (event) {
        if(validateFirstPart()){
            $("#partone").hide();
            $("#parttwo").fadeIn("slow");
        }
});

Upvotes: 1

Related Questions