對多個隱藏的DIV分割的表單進行Jquery驗證

我創建了一個分成2個DIV的表單。當用戶點擊NEXT按鈕時，我想做兩件事：1.驗證第一個DIV中的文本字段，如果成功; 2.隱藏第一個DIV並淡入第二個DIV（如果驗證失敗，顯示一條消息並阻止顯示錶單的第二部分）。對多個隱藏的DIV分割的表單進行Jquery驗證

我已經剝離了我的代碼。這是當點擊圖像按鈕時隱藏第一個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; 
}

來源

2013-04-23 MacGyver_97

只需將hide（）和淡入（）來檢查，如果表單的第一部分是無效的，如果子句中。

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-23 01:21:13 Lasse

你打敗了我，但是，這是要走的路。 – guysherman 2013-04-23 01:28:43

謝謝，但這似乎並沒有阻止第一個DIV消失。

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

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-23 02:18:05

相關問題

對多個隱藏的DIV分割的表單進行Jquery驗證

回答

相關問題