0

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

2 回答 2

1

只需将 hide() 和 fadeIn() 放在 if 子句中，检查表单的第一部分是否有效。

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");
        }
});
于 2013-04-23T01:21:13.020 回答
0

啊哈！是的。它的工作原理如下：

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");
        }
});
于 2013-04-23T02:18:05.633 回答