-1
ドロップダウンメニューが未応答の場合は、ユーザーにアラートを送信します。 未回答のドロップダウンメニューにアラートを提供するコードはすでにあります。しかし、私の既存のJavascriptにこのコードを追加しようとしています。ドロップダウンメニュー警告のある確認
コードは、ユーザーに関する情報を収集するフォームを作成します。フォームは、5つのステップがあります。
- ユーザー情報（名前、メールアドレス、電話番号、年齢、性別）
- [はい]または[いいえ質問（ドロップダウンメニュー）
- [はい]または[いいえ質問を （ドロップダウンメニュー）ユーザーは、前/次を押すたびのため
- [はい]または[いいえ質問（ドロップダウンメニュー）
- [はい]または[いいえ質問（ドロップダウンメニュー）
コードも埋め込まれているアニメーションボタン。
ドロップダウンメニューの検証アラートを既存のJavascriptに追加するにはどうすればよいですか（手順2〜5）。アニメーションの外観をよりよく理解するには、http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
にアクセスしてください。
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(){
//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;
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>DROP DOWNメニューALERTのCODE：右の前に（アニメーション）の場合はfalseを返す
$("#PastNext").click(function(event){
var validate = $("#past").val();
if(validate=="")
{
event.preventDefault();
alert("You have not selected any option");
}
});
ようこそために、JavaはJavascriptを
ないでください
。私はJavaタグを編集しましたので、次回はご注意ください – Frakcoolごめんなさい、私の問題を助けてくれますか？ – Joe
実際には、私はJS/jQueryタグの実際の専門家ではないので、私はそれらを知っていますが、私はあなたを助けるための十分な専門知識を持っていません。ちょっと待ってから（[mcve]を含む）待っている間にできるだけ質問を改善して、より速くより良い回答を得るようにしてください。 – Frakcool