1

我有一个简单的表格。当我提交带有不正确信息的表单时,会出现错误消息,但我希望第一个不正确的输入以焦点突出显示。我认为我使用 .focus() 的方式是正确的,但它可能不适合函数的其余部分。这是我的代码:

<form name="login-registration" onSubmit="return validateForm()" method="post" action="" novalidate >
    <div class="span-4">
        <label>Email</label>
        <label>Your password</label>
        <label>Repeat password</label>
        <label> <input class="inline check" type="checkbox" id="policy" name="policy" value="policy" /> I agree</label>
    </div>    
    <div class="span-4">
        <input type="email" name="emailinput" id="emailinput" value = "<?php echo htmlspecialchars($_POST['emailinput']); ?>"/>
        <input type="password" name="pswinput" id="pswinput" value=""/>
        <input type="password" name="pswrepeatinput" id="pswrepeatinput" value="" onblur="isValidPswRep()"/>

        <input type="submit" name="submit" value="Login" />
    </div>
    <div class="span-4">
        <p id="emptyEmail" class="hidden">Email field is required</p>
        <p id="invalidEmail" class="hidden">Email you insert is invalid!</p>
        <p id="pswMinMax" class="hidden">Password should be from 4 to 8 caracters</p>
        <p id="pswLettNum" class="hidden">Password should be letters and numbers. No special caracters are allow</p>
        <p id="pswR" class="hidden">Your passwords is different</p>
        <p id="checkN" class="hidden">You must agree to our term</p>
    </div>
</form>

这里的脚本:

function validateForm(){
var email = document.getElementById("emailinput").value;
var psw = document.getElementById("pswinput").value;
var pswrep = document.getElementById("pswrepeatinput").value;
var check = document.getElementById("policy");
    if (isValidEmail(email)){
        if(isValidPsw(psw,4,8)){
            if(isValidPswRep(pswrep)){
                if(isValidCheckbox(check)){
                    return true;
                }
            }
        }
    }
 return false;
}
function isValidEmail(email) {
var validCharacters = /^\w+@\w+\.\w+$/;
 if(email == ""){
    var emailErr = document.getElementById("emptyEmail");
    emailErr.className = "error";
    var emailErr2 = document.getElementById("invalidEmail");
    emailErr2.className = "hidden";
    return false;
    email.focus();
} else if(!validCharacters.test(email)) {
    var emailErr = document.getElementById("emptyEmail");
    emailErr.className = "hidden";
    var emailErr2 = document.getElementById("invalidEmail");
    emailErr2.className = "error";
    return false;
    email.focus();
} else {
    var emailErr = document.getElementById("emptyEmail");
    emailErr.className = "hidden";
    var emailErr2 = document.getElementById("invalidEmail");
    emailErr2.className = "hidden";
    return true;
}


    }

    function isValidPsw(psw, minLen, maxLen) {
var lengthPsw = psw.length;
var lettNum = /^[0-9a-zA-Z]+$/;
if(lengthPsw == 0 || lengthPsw <= minLen || lengthPsw > maxLen){
    var pswErr = document.getElementById("pswMinMax");
    pswErr.className = "error";
    var pswErr2 = document.getElementById("pswLettNum");
    pswErr2.className = "hidden";
    return false;
    psw.focus();
} else if(!lettNum.test(psw)){
    var pswErr2 = document.getElementById("pswLettNum");
    pswErr2.className = "error";
    var pswErr = document.getElementById("pswMinMax");
    pswErr.className = "error";     
    return false;
    psw.focus();
} else {
    var pswErr = document.getElementById("pswMinMax");
    pswErr.className = "hidden";
    var pswErr2 = document.getElementById("pswLettNum");
    pswErr2.className = "hidden";
    return true;
}
    }

    function isValidPswRep(pswrep){
var psw = document.getElementById("pswinput").value;
var pswrep = document.getElementById("pswrepeatinput").value;
if(pswrep != psw){
    var pswRepErr = document.getElementById("pswR");
    pswRepErr.className = "error";
    return false;
    pswrep.focus();
} 
var pswRepErr = document.getElementById("pswR");
pswRepErr.className = "hidden";
return true;
    }

    function isValidCheckbox(check){
if (!check.checked){
    var checkErr = document.getElementById("checkN");
    checkErr.className = "error";   
    return false;
    check.focus();
}
var checkErr = document.getElementById("checkN");
checkErr.className = "hidden";
return true;
    }
4

0 回答 0