Question

我创建了一个分为2个DIV的表单。当用户单击NEXT按钮时，我想做两件事：1。验证第一个DIV中的文本字段，如果成功; 2.隐藏第一个DIV并淡化第二个DIV（如果验证失败，显示一条消息，并阻止显示表单的第二部分）。

我已经删除了我的代码。这是当单击图像按钮时当前隐藏第一个DIV的脚本。我不知道如何修改这个脚本来对字段执行验证，防止第一个DIV隐藏，第二个DIV显示：

<script>
  $(document).ready(function(){
    $("img.nextlink").click(function (event) {
    $("#partone").hide();
    $("#parttwo").fadeIn("slow");
  });    
</script>

表格如下：

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

Answer 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");
        }
});

Answer 2

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

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

表单的Jquery验证分为多个隐藏的DIV

2 个答案: