註冊表不會因爲問題性別部分返回true

Question

我創建的註冊表單（帶有驗證）已基本完成，但表單的性別部分存在一些問題：即使我選中了單選按鈕之一，整個表格填滿了，表格仍然不會回覆真實。我需要你的幫助。

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的結果。如果沒有發現錯誤，您需要他們返回虛假。
二，您正在使用& &（和）之間的..Error（）函數的調用。但是你想要得到一個假的返回，即使只有一個錯誤發生。要達到此目的，請使用||代替（或）。

這應該解決您的困難。如果發現錯誤，則返回假。除了更改& & ANDS的，你需要交換假並在的onsubmit功能真正。

電賀