CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Siddhu
Siddhu

Reputation: 241

HTML form validation for next and prev buttons form flow

I need form validation for this type of form. I have next button and previous button to answer the questions. Now my problem is when I skip few question at the last question I have to submit. before submit I need check all required filed. it's not firing that required input field.

My code 

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

Please click on below link to see my code.

JSfiddle

Upvotes: 2

Views: 1756

Answers (1)

black_pottery_beauty
black_pottery_beauty

Reputation: 879

Check this 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" >

Upvotes: 2

Related Questions