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;

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

开头

if (complete) {...

由于完全从false开始，所以这些块都不会运行！

Answer 2

错误：Uncaught reference validate_form() not defined

从按钮中删除onclick。表单的onsubmit事件将为您完成工作。

Answer 3

您的valide_form函数永远不会执行任何操作，因为您设置了complete = false;

Answer 4

当您要进行布尔验证（检查true或false）时，您可以在javascript中定义布尔对象，如下所示：

var myBoolean = new Boolean（）;

myBoolean = true;

从你的javascript片段我假设你只在条件为真时检查条件，所以如果需要检查第一个条件，那么布尔对象在开始时初始化为true。如果它返回true，那么将检查下一个条件，否则将显示错误消息。我认为这是你想到的流程。

P.s：你也可以添加Alert（）; javascript中的消息最初用于研究代码流，这有助于在初始阶段进行故障排除。

希望它能解决问题。

此致拉杰夫

表格不会验证

4 个答案: