javascript - 表单将无法验证

Question

我的表单不会验证，使用提交按钮调用时我的所有功能都不会验证

//This is the main function 
function validate_form(form) {
    var complete = false;

    //  Ensure that only one error message is diaplayed at a time
    if (complete) {
        clear_all();
        complete = checkUsernameForLength(form.username.value);

    }
    if (complete) {
        clear_all();
        complete = checkaddress(form.address.value);
    }
    if (complete) {
        clear_all();
        complete = checkaddress(form.address.value);
    }

    if (complete) {
        clear_all();
        complete = checkphone(form.phone.value);
    }
    if (complete) {
        clear_all();
        complete = checkEmail(email.phone.value);
    }

}

//Clear all red areas


function clear_all() {

    document.getElementById('usernamehint').style.visibility = 'hidden';
    document.basicform.username.style.backgroundColor = 'white';
    document.getElementById("countryhint").style.visibility = 'hidden';
    document.basicform.country.style.backgroundColor = 'white';
    document.getElementById("").style.visibility = 'hidden';
    document.basicformm.address.style.backgroundColor = 'white';
    document.getElementById("").style.visibility = 'hidden';
    document.basicform.phone.style.backgroundColor = 'white';
    document.getElementById("").style.visibility = 'hidden';
    document.basicform.email.style.backgroundColor = 'white';

}

// This function checks if the username field
// is at least 6 characters long.
// If so, it attaches class="welldone" to the 
// containing fieldset.


function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 2) {
        fieldset.className = "welldone";
        return true;
    } else {
        fieldset.className = "";
        return false;
    }
}




// This function checks the email address to be sure
// it follows a certain pattern:
// If so, it assigns class="welldone" to the containing
// fieldset.

function checkEmail(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}

// If the address is at least 4 characters long, the containing 
// fieldset is assigned class="kindagood".

function checkaddress(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length < 10) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}



function checkphone(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}

// this part is for the form field hints to display
// only on the condition that the text input has focus.
// otherwise, it stays hidden.

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}


function prepareInputsForHints() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onfocus = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

        }

        inputs[i].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
    }
}
addLoadEvent(prepareInputsForHints);     

这是我的表格:

   <form action="#" name="basicform"  id="basicform"  onsubmit="return validate_form()" method="post" > 

                                    <fieldset> 
                                        <label for="username">Name:</label> 
                                        <input type="text"id="username" onkeyup="checkUsernameForLength(this);" /> 
                                      <span class="hint" id="usernamehint">This Field Must Not Be Left Blank !</span> 
                                    </fieldset> 

                                     <fieldset> 
                                        <label for="country">Country:</label> 
                                        <input
                                            type="text"
                                            id="country"
                                            onkeyup="checkaddress(this);" /> 
                                        <span class="hint" id="countryhint">This Field Must Not Be Left Blank !</span> 
                                    </fieldset> 


                 <fieldset> 
                    <label for="Subject">Subject:</label> 
                    <input
                        type="text"
                        id="country"
                        onkeyup="checkaddress(this);" /> 
                    <span class="hint">Please Indicate What Your Interest Is !</span> 
                </fieldset> 



                 <fieldset> 
                    <label for="Phone">Phone:</label> 
                    <input
                        type="text"
                        id="Phone"
                        onkeyup="checkphone(this);" /> 
                    <span class="hint">This Feld Must Be Numeric Values Only !</span> 
                </fieldset> 

                <fieldset> 
                    <label for="email">Email Address:</label> 
                    <input
                        type="text"
                        id="email"
                        onkeyup="checkEmail(this);" /> 
                    <span class="hint">You can enter your real address without worry - we don't spam!</span> 
                </fieldset> 


                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input value="send" class="gray" type="button" onclick="validate_form(this.form)"/>
                  <br /><br /> <br /><br />   
                </form> 

这是一个链接 http://jsfiddle.net/j5fMq/

Answer 1

问题是 validate_form() 以

开头

var complete = false;

然后方法中的每个其他 block 都以

开始

if (complete) {...

由于 Complete 是从 false 开始的，所以这些 block 都不会运行!