問題の性別セクションのため、登録フォームはtrueを返しません

Question

私が作成した登録フォーム（検証あり）はほとんど完成しましたが、フォームの性別セクションに少し問題があります：ラジオボタンとフォーム全体がいっぱいになると、フォームは依然としてtrueに戻りません。私はあなたの助けが必要です。

HTML

<form role="form" action="" method="post" class="reg-form col-md-12 col-sm-12 col-lg-12"> 
    <div class="form-group col-md-6 col-sm-6 col-lg-6 fname_group"> 
     <label>First Name</label> 
     <input type="text" name="reg_first_name" class="form-control reg_first_name" autocomplete="off"> 
     <span class="help-block fname_error hidden"></span> 
    </div> 
    <div class="form-group col-md-6 col-sm-6 col-lg-6 lname_group"> 
     <label>Last Name</label> 
     <input type="text" name="reg_last_name" class="form-control reg_last_name" autocomplete="off"> 
     <span class="help-block lname_error hidden"></span> 
    </div> 
    <div class="form-group col-md-12 col-sm-12 col-lg-12 email_group"> 
     <label>Email</label> 
     <input type="text" name="reg_email" class="form-control reg_email" autocomplete="off"> 
     <span class="help-block email_error hidden"></span> 
    </div> 
    <div class="form-group col-md-12 col-sm-12 col-lg-12 uname_group"> 
     <label>Username</label> 
     <input type="text" name="reg_username" class="form-control reg_username" autocomplete="off"> 
     <span class="help-block uname_error hidden"></span> 
    </div> 
    <div class="form-group col-md-12 col-sm-12 col-lg-12 pword_group"> 
     <label>Password</label> 
     <input type="password" name="reg_password" class="form-control reg_password"> 
     <span class="help-block pword_error hidden"></span> 
    </div> 
    <div class="form-group col-md-12 col-sm-12 col-lg-12 pword_again_group"> 
     <label>Confirm Password</label> 
     <input type="password" name="reg_password_again" class="form-control reg_password_again"> 
     <span class="help-block pword_again_error hidden"></span> 
    </div> 
    <div class="radio col-md-12 col-sm-12 col-lg-12 gender_group"> 
     <label><input type="radio" class="reg_radio_male" name="reg_gender" value="Male"> Male</label> 
     <label><input type="radio" class="reg_radio_female" name="reg_gender" value="Female"> Female</label> 
     <span class="help-block gender_error hidden"></span> 
    </div> 
    <div class="form-group col-md-12 col-sm-12 col-lg-12"> 
     <input type="submit" value="Register" class="btn btn-default"> 
    </div> 
</form> 

はJavaScript

'use strict'; 

let $ = document.querySelector.bind(document); 

class Validate { 
    is_blank(field) { 
     return $(field).value.length == 0; 
    } 
    exactPattern(field, pattern) { 
     return $(field).value.match(pattern); 
    } 
    lessThanLength(field, textlength) { 
     return $(field).value.length < textlength; 
    } 
    moreThanLength(field, textlength) { 
     return $(field).value.length > textlength; 
    } 
    falseMatch(firstfield, secondfield) { 
     return $(firstfield).value != $(secondfield).value; 
    } 
} 

class Errors { 
    addClass(field, className) { 
     return $(field).classList.add(className); 
    } 
    removeClass(field, className) { 
     return $(field).classList.remove(className); 
    } 
    displayError(span, errorMessage) { 
     return $(span).innerHTML = errorMessage; 
    } 
} 

let val = new Validate(); 
let err = new Errors(); 

function fnameError() { 
    if(val.is_blank('.reg_first_name')) { 
     err.addClass('.fname_group', 'has-error'); 
     err.removeClass('.fname_error', 'show'); 
     err.addClass('.fname_error', 'hidden'); 
    } else if(val.lessThanLength('.reg_first_name', 2)) { 
     err.addClass('.fname_group', 'has-error'); 
     err.removeClass('.fname_error', 'hidden'); 
     err.addClass('.fname_error', 'show'); 
     err.displayError('.fname_error', 'Minimum: 2 characters'); 
    } else if(!val.exactPattern('.reg_first_name', /^[a-zA-Z ]*$/)) { 
     err.addClass('.fname_group', 'has-error'); 
     err.removeClass('.fname_error', 'hidden'); 
     err.addClass('.fname_error', 'show'); 
     err.displayError('.fname_error', 'Enter a valid first name'); 
    } else { 
     err.removeClass('.fname_group', 'has-error'); 
     err.removeClass('.fname_error', 'show'); 
     err.addClass('.fname_error', 'hidden'); 
    } 
    return true; 
} 

function lnameError() { 
    if(val.is_blank('.reg_last_name')) { 
     err.addClass('.lname_group', 'has-error'); 
     err.removeClass('.lname_error', 'show'); 
     err.addClass('.lname_error', 'hidden'); 
    } else if(val.lessThanLength('.reg_last_name', 2)) { 
     err.removeClass('.lname_group', 'has-error'); 
     err.removeClass('.lname_error', 'hidden'); 
     err.addClass('.lname_error', 'show'); 
     err.displayError('.lname_error', 'Minimum: 2 characters'); 
    } else if(!val.exactPattern('.reg_last_name', /^[a-zA-Z ]*$/)) { 
     err.addClass('.lname_group', 'has-error'); 
     err.removeClass('.lname_error', 'hidden'); 
     err.addClass('.lname_error', 'show'); 
     err.displayError('.lname_error', 'Enter a valid last name'); 
    } else { 
     err.removeClass('.lname_group', 'has-error'); 
     err.removeClass('.lname_error', 'show'); 
     err.addClass('.lname_error', 'hidden'); 
    } 
    return true; 
} 

function emailError() { 
    if(val.is_blank('.reg_email')) { 
     err.addClass('.email_group', 'has-error'); 
     err.removeClass('.email_error', 'show'); 
     err.addClass('.email_error', 'hidden'); 
    } else if(!val.exactPattern('.reg_email', /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)) { 
     err.addClass('.email_group', 'has-error'); 
     err.removeClass('.email_error', 'hidden'); 
     err.addClass('.email_error', 'show'); 
     err.displayError('.email_error', 'Enter a valid email address'); 
    } else { 
     err.removeClass('.email_group', 'has-error'); 
     err.removeClass('.email_error', 'show'); 
     err.addClass('.email_error', 'hidden'); 
    } 
    return true; 
} 

function unameError() { 
    if(val.is_blank('.reg_username')) { 
     err.addClass('.uname_group', 'has-error'); 
     err.removeClass('.uname_error', 'show'); 
     err.addClass('.uname_error', 'hidden'); 
    } else if(val.lessThanLength('.reg_username', 6)) { 
     err.removeClass('.uname_group', 'has-error'); 
     err.removeClass('.uname_error', 'hidden'); 
     err.addClass('.uname_error', 'show'); 
     err.displayError('.uname_error', 'Minimum: 6 characters'); 
    } else if(val.moreThanLength('.reg_username', 20)) { 
     err.removeClass('.uname_group', 'has-error'); 
     err.removeClass('.uname_error', 'hidden'); 
     err.addClass('.uname_error', 'show'); 
     err.displayError('.uname_error', 'Maximum: 20 characters'); 
    } else if(!val.exactPattern('.reg_username', /^[a-zA-Z0-9]*$/)) { 
     err.addClass('.uname_group', 'has-error'); 
     err.removeClass('.uname_error', 'hidden'); 
     err.addClass('.uname_error', 'show'); 
     err.displayError('.uname_error', 'Enter a valid username. No spaces'); 
    } else { 
     err.removeClass('.uname_group', 'has-error'); 
     err.removeClass('.uname_error', 'show'); 
     err.addClass('.uname_error', 'hidden'); 
    } 
    return true; 
} 

function pwordError() { 
    if(val.is_blank('.reg_password')) { 
     err.addClass('.pword_group', 'has-error'); 
     err.removeClass('.pword_error', 'show'); 
     err.addClass('.pword_error', 'hidden'); 
    } else if(val.lessThanLength('.reg_password', 8)) { 
     err.removeClass('.pword_group', 'has-error'); 
     err.removeClass('.pword_error', 'hidden'); 
     err.addClass('.pword_error', 'show'); 
     err.displayError('.pword_error', 'Minimum: 8 characters'); 
    } else if(val.moreThanLength('.reg_password', 20)) { 
     err.removeClass('.pword_group', 'has-error'); 
     err.removeClass('.pword_error', 'hidden'); 
     err.addClass('.pword_error', 'show'); 
     err.displayError('.pword_error', 'Maximum: 20 characters'); 
    } else if(!val.exactPattern('.reg_password', /^[a-zA-Z0-9]*$/)) { 
     err.addClass('.pword_group', 'has-error'); 
     err.removeClass('.pword_error', 'hidden'); 
     err.addClass('.pword_error', 'show'); 
     err.displayError('.pword_error', 'Enter a valid password. No spaces'); 
    } else { 
     err.removeClass('.pword_group', 'has-error'); 
     err.removeClass('.pword_error', 'show'); 
     err.addClass('.pword_error', 'hidden'); 
    } 
    return true; 
} 

function pwordAgainError() { 
    if(val.is_blank('.reg_password_again')) { 
     err.addClass('.pword_again_group', 'has-error'); 
     err.removeClass('.pword_again_error', 'show'); 
     err.addClass('.pword_again_error', 'hidden'); 
    } else if(val.falseMatch('.reg_password_again', '.reg_password')) { 
     err.removeClass('.pword_again_group', 'has-error'); 
     err.removeClass('.pword_again_error', 'hidden'); 
     err.addClass('.pword_again_error', 'show'); 
     err.displayError('.pword_again_error', 'Passwords do not match'); 
    } else { 
     err.removeClass('.pword_again_group', 'has-error'); 
     err.removeClass('.pword_again_error', 'show'); 
     err.addClass('.pword_again_error', 'hidden'); 
    } 
    return true; 
} 

function genderError() { 
    if(!$('.reg_radio_male').checked && !$('.reg_radio_female').checked) { 
     err.removeClass('.gender_group', 'has-error'); 
     err.removeClass('.gender_error', 'hidden'); 
     err.addClass('.gender_error', 'show'); 
     err.displayError('.gender_error', 'Gender is required'); 
    } else { 
     err.removeClass('.gender_group', 'has-error'); 
     err.removeClass('.gender_error', 'show'); 
     err.addClass('.gender_error', 'hidden'); 
    } 
    return true; 
} 

$('.reg_first_name').onblur = fnameError; 
$('.reg_last_name').onblur = lnameError; 
$('.reg_email').onblur = emailError; 
$('.reg_username').onblur = unameError; 
$('.reg_password').onblur = pwordError; 
$('.reg_password_again').onblur = pwordAgainError; 

$('.reg-form').onsubmit = function() { 
    if(fnameError() && lnameError() && emailError() && unameError() && pwordError() && pwordAgainError() && genderError()) { 
     return false; 
    } else { 
     return true; 
    } 
} 

P.S：私は、フォームのデザインのためのブートストラップを使用していますので、あまりにも多くのクラス名のために申し訳ありません。

Answer 1

まず、すべての..Error（）関数は、関係なく、場合-statementsの結果、真を返します。エラーが見つからない場合は偽を返す必要があります。
第2のあなたは..Error（）関数の呼び出しの間に& &（および）を使用しています。しかし、エラーが1つしか発生しない場合でも、が偽のを返すようにしたいとします。これを実現するには、||代わりに（または）。

これはあなたの困難を解決するはずです。
注：も同様ですが、エラーが見つかった場合はfalseを返してください。代わりに& &論理積を変更するのは、あなたのをonSubmit機能に偽と真を交換する必要があると思います。

は