2016-09-15 12 views
2

このタイプのフォームのフォーム検証が必要です。私は質問に答えるために次のボタンと前のボタンを持っています。今私の問題は、私が提出しなければならない最後の質問でいくつかの質問をスキップするときです。提出する前に、必要なすべての項目をチェックする必要があります。それは必要な入力フィールドを発射していません。次フォームと前ボタンフォームのHTMLフォーム検証

私のコード

<div class="divs"> 
<form method="post" name="form"> 
<div class="cls1">Q1.....<br><input type="text" name="sid" required></div> 
    <div class="cls2">Q2.....<br><input type="text" name="sid" value="2" ></div> 
    <div class="cls3">Q3.....<br><input type="text" name="sid" required></div> 
    <div class="cls4">Q4.....<br><input type="text" name="sid" required></div> 
    <div class="cls5">Q5.....<br><input type="text" name="sid" required></div> 
    <div class="cls6">Q6.....<br><input type="text" name="sid" required></div> 
    <div class="cls7">Q7.....<br><input type="text" name="sid" value="7"><input type="submit" name="submit"></div> 

    </form> 
</div> 

<button id="prev">prev</button>&nbsp; &nbsp; &nbsp;<button id="next">next</button> 

<script src="http://code.jquery.com/jquery-2.1.1.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".divs div").each(function(e) { 
     if (e != 0) 
      $(this).hide(); 
    }); 

    $("#next").click(function(){ 
     if ($(".divs div:visible").next().length != 0) 
      $(".divs div:visible").next().show().prev().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:first").show(); 
     } 
     return false; 
    }); 

    $("#prev").click(function(){ 
     if ($(".divs div:visible").prev().length != 0) 
      $(".divs div:visible").prev().show().next().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:last").show(); 
     } 
     return false; 
    }); 
}); 
</script> 

私のコードを参照するためのリンクの下にクリックしてください。

JSfiddle

+0

あなたの検証機能がありますか? – phpdroid

+0

私はちょうど必要なものを入れました。そのhtmlの検証 – Siddhu

+0

あなたが機能を通して解決策を与えても、私は満足しています:-) – Siddhu

答えて

2

チェックこのfiddle

$('#validateMethod').click(function(){ 
$.each($('.divs').find('input[type="text"]'),function(i,data){ 
    if($(this).val() == ""){ 
    alert($(this).parent().text()+' is Empty'); 
    return false; 
    } 
}) 
}) 

<input type="submit" id="validateMethod" name="submit" >