JavaScript空のフィールドと未応答のラジオ、ボタンの検証W /アラート

Question

フィールドが空のままでチェックマークが付いていないときにアラートを提供するJavaScript検証コードを探しています（オスまたはメスオプション） 、ボタンを押してください。

<fieldset> 
 
\t \t <h2 class="fs-title">APPLICATION</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" class="next action-button" value="Next" /> 
 
\t </fieldset>

Answer 1

は、ボタンにイベントリスナーを追加し、以下のように入力の値をチェックしてください。

は、ここに私のHTMLコードです。エラーの場合は return falseです。

document.getElementById('btnNext').addEventListener('click', 
 
function(){ 
 
//text inputs 
 
if(!document.getElementById('fullname').value){ 
 
alert('full name 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 
 
} 
 
console.log('success'); 
 
alert('success'); 
 
return true; 
 

 
});

<fieldset> 
 
\t \t <h2 class="fs-title">APPLICATION</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>

すべての入力がform内にある場合、submitイベントを聞いて、その名前で入力を参照することをお勧めします。

<form id="Form1"> 
    <!-- your HTML --> 
    <input type="submit" /> 
</form> 
<script> 
document.getElementById('Form1').addEventListener('submit', 
function(){ 
if(!this['firstname'].value) //**this** here is the form here. 'firstname' is **name** attribute, not **id** 
    return false; 
if(!this['gender'].value) 
    return false; 
}); 
</script>