ドロップダウンメニュー検証複数のボタンW /警告

Question

ユーザーに関する情報を収集するフォームを作成しようとしています。

ステップ1：ユーザー情報（名前、メールアドレス、電話番号、年齢、性別） ステップ2：[はい]または[いいえ質問 ステップ3：YesまたはNo質問 ステップ4：YesまたはNo質問形式は、5つのステップがあります ステップ5：はいまたはいいえ質問

このフォームを使用すると、ユーザーは次の段階に進むか、前の手順に戻ることができます。 ユーザーが次の手順に進むことを許可する前に、ユーザーは要件を満たす必要があります。質問が回答されない場合、妥当性検査によってアラートユーザーが表示されます。

ドロップダウンメニューの検証を追加するにはどのようにすればいいですか？/ wすべての手順について警告します。ユーザーは次の手順に戻ることができます。

マイコード：

var current_fs, next_fs, previous_fs; //fieldsets 
 
var left, opacity, scale; //fieldset properties which we will animate 
 
var animating; //flag to prevent quick multi-click glitches 
 

 
$(".next").click(function(){ 
 
    document.getElementById('btnNext').addEventListener('click', 
 
function(){ 
 
//text inputs 
 
if(!document.getElementById('fullname').value){ 
 
alert('Full Name is required'); 
 
return false; 
 
} 
 

 
else if(!document.getElementById('email').value){ 
 
alert('Email is required'); 
 
return false; 
 
} 
 

 
else if(!document.getElementById('phone').value){ 
 
alert('Phone Number is required'); 
 
return false; 
 
} 
 

 
else if(!document.getElementById('age').value){ 
 
alert('Age is required'); 
 
return false; 
 
} 
 
     
 
//radio buttons 
 
var genderSet = false; 
 
var genderBtns = document.getElementsByName('gender'); 
 
//console.log(genderBtns); 
 
for(var i=0, btn; btn=genderBtns[i];++i){ 
 
if(btn.checked){ 
 
    genderSet=true; 
 
    break; 
 
} 
 
} 
 
if(!genderSet){ 
 
alert('Gender is required'); 
 
return false 
 
} 
 
     
 
\t if(animating) return false; 
 
\t animating = true; 
 
\t 
 
\t current_fs = $(this).parent(); 
 
\t next_fs = $(this).parent().next(); 
 
    \t 
 
\t //activate next step on progressbar using the index of next_fs 
 
\t $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 
 
\t 
 
\t //show the next fieldset 
 
\t next_fs.show(); 
 
\t //hide the current fieldset with style 
 
\t current_fs.animate({opacity: 0}, { 
 
\t \t step: function(now, mx) { 
 
\t \t \t //as the opacity of current_fs reduces to 0 - stored in "now" 
 
\t \t \t //1. scale current_fs down to 80% 
 
\t \t \t scale = 1 - (1 - now) * 0.2; 
 
\t \t \t //2. bring next_fs from the right(50%) 
 
\t \t \t left = (now * 50)+"%"; 
 
\t \t \t //3. increase opacity of next_fs to 1 as it moves in 
 
\t \t \t opacity = 1 - now; 
 
\t \t \t current_fs.css({'transform': 'scale('+scale+')'}); 
 
\t \t \t next_fs.css({'left': left, 'opacity': opacity}); 
 
\t \t }, 
 
\t \t duration: 800, 
 
\t \t complete: function(){ 
 
\t \t \t current_fs.hide(); 
 
\t \t \t animating = false; 
 
\t \t }, 
 
\t \t //this comes from the custom easing plugin 
 
\t \t easing: 'easeInOutBack' 
 
\t }); 
 
     }); 
 
}); 
 

 
$(".previous").click(function(){ 
 
\t if(animating) return false; 
 
\t animating = true; 
 
\t 
 
\t current_fs = $(this).parent(); 
 
\t previous_fs = $(this).parent().prev(); 
 
\t 
 
\t //de-activate current step on progressbar 
 
\t $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 
 
\t 
 
\t //show the previous fieldset 
 
\t previous_fs.show(); 
 
\t //hide the current fieldset with style 
 
\t current_fs.animate({opacity: 0}, { 
 
\t \t step: function(now, mx) { 
 
\t \t \t //as the opacity of current_fs reduces to 0 - stored in "now" 
 
\t \t \t //1. scale previous_fs from 80% to 100% 
 
\t \t \t scale = 0.8 + (1 - now) * 0.2; 
 
\t \t \t //2. take current_fs to the right(50%) - from 0% 
 
\t \t \t left = ((1-now) * 50)+"%"; 
 
\t \t \t //3. increase opacity of previous_fs to 1 as it moves in 
 
\t \t \t opacity = 1 - now; 
 
\t \t \t current_fs.css({'left': left}); 
 
\t \t \t previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
 
\t \t }, 
 
\t \t duration: 800, 
 
\t \t complete: function(){ 
 
\t \t \t current_fs.hide(); 
 
\t \t \t animating = false; 
 
\t \t }, 
 
\t \t //this comes from the custom easing plugin 
 
\t \t easing: 'easeInOutBack' 
 
\t }); 
 
}); 
 

 
$(".submit").click(function(){ 
 
\t return false; 
 
})

<!-- fieldsets --> 
 
\t <fieldset> 
 
\t \t <h2 class="fs-title">Step 1</h2> 
 
\t \t <h3 class="fs-subtitle">Background Information</h3> 
 
     <input type="text" id="fullname" name="fullname" placeholder="Full Name"> 
 
     <input type="text" id="email" name="email" placeholder="E-Mail"> 
 
     <input type="text" id="phone" name="phone" placeholder="Phone"> 
 
     <input type="number" id="age" name="age" placeholder="Age"> 
 
     
 
     <h4>Gender</h4> 
 
     <div class="row"> 
 
     <div> 
 
      <input type="radio" name="gender" value="male" id="gender-male"/> 
 
      <label for="gender-male">Male</label> 
 
     </div> 
 
      <div> 
 
      <input type="radio" name="gender" value="female" id="gender-female"/> 
 
      <label for="gender-female">Female</label> 
 
     </div> 
 
      
 
    </div> 
 
     <div class="row"> 
 
     <h4>Description</h4> 
 
     <div class="input-group"> 
 
     <label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label> 
 
     </div> 
 
    </div> 
 

 
<input type="button" name="next" id="btnNext" class="next action-button" value="Next" /> 
 
\t </fieldset> 
 
    
 
    
 
    
 
\t <fieldset> 
 
\t \t <h2 class="fs-title">Step 2 </h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
     
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> 
 
     <div> 
 
<select name="past" id="past"> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" name="next" class="next action-button" id="PastNext" value="Next" /> 
 
\t </fieldset> 
 
    
 
    
 
<fieldset> 
 
\t \t <h2 class="fs-title">Step 3</h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t <div> 
 
<select> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" name="next" class="next action-button" value="Next" /> 
 
\t </fieldset> 
 
<fieldset> 
 
\t \t <h2 class="fs-title">Step 4</h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
    <br> 
 
    
 
<div> 
 
<select> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" name="next" class="next action-button" value="Next" /> 
 
\t </fieldset> 
 
\t <fieldset> 
 
\t \t <h2 class="fs-title">Step 5 </h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
    
 
    Can you come to this location?<br> <br> 
 
    <br> 
 
     
 
     
 
<div> 
 
<select> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br><br><br> 
 
     
 
     <div class="row"> 
 
     <h4>Terms and Conditions</h4> 
 
     <div class="input-group"> 
 
      <input id="terms" type="checkbox"> 
 
     <label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </label> 
 
     </div> 
 
    </div> 
 
     
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
 
\t </fieldset> 
 
</form>

Answer 1

・ホープ、このことができます：

\t 
 
$("#frm").submit(function(event){ 
 
// var valDDL = $(this).val(); 
 
     //event.preventDefault(); 
 
     var valDDL = $("#store_name").val(); 
 
     if(valDDL=="") 
 
     { 
 
      event.preventDefault(); 
 
      alert("select dropdown option"); 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="frm"> 
 

 
<select id="store_name" class="select1" name="store[name]"> 
 
    <option value="">Select Action</option> 
 
    <option value="delete">Delete</option> 
 
    <option value="changestatus">Change Status</option> 
 
</select> 
 

 
<input type="submit" value="Submit" name="commit"/> 
 
</form>

$("#PastNext").click(function(event){ 
 
     var validate = $("#past").val(); 
 
     if(validate=="") 
 
     { 
 
      event.preventDefault(); 
 
      alert("You have not selected any option"); 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
\t \t <h2 class="fs-title">Step 2 </h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
     
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> 
 
     <div> 
 
<select id="past" name="past[option]"> 
 
    <option value="" >Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" name="next" class="next action-button" id="PastNext" value="Next" /> 
 
\t </fieldset>