성별 섹션으로 인해 등록 양식이 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> 

자바 스크립트

'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의 결과로, 사실을 반환합니다. 오류가 발견되지 않으면 false을 반환해야합니다.
두 번째,& & (및) ..Error() 함수 호출 사이에. 그러나 단 하나의 오류가 발생하더라도 false이 반환되기를 원합니다. 이를 위해 || (또는) 대신.

이렇게하면 자신의 어려움을 해결할 수 있습니다.
참고 : 다른 방법으로도 수행 할 수 있으므로 오류가 발견되면 거짓을 반환하십시오. 대신 & &의 ands을 변경, 당신은 교환 할 필요가하려는 거짓하고 onsubmit 함수에서 사실.

는