Форма не будет подтверждена - PullRequest
0 голосов
/ 20 апреля 2011

Моя форма не проверяется, все мои функции при вызове с помощью кнопки отправки

//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/

Ответы [ 4 ]

5 голосов
/ 20 апреля 2011

Проблема в том, что validate_form () начинается с

var complete = false;

, а затем все остальные блоки в методе начинаются с

if (complete) {...

Поскольку complete начинается с false, ни один из нихблоки будут работать!

2 голосов
/ 20 апреля 2011

Ошибка: Uncaught reference validate_form() not defined

убрать клик с кнопки.событие onsubmit формы выполнит эту работу за вас.

0 голосов
/ 20 апреля 2011

Когда вы собираетесь провести булевскую проверку (проверка true или false), вы определяете логический объект в javascript, как показано ниже:

var myBoolean = new Boolean ();

myBoolean = true;

из вашего фрагмента JavaScript, я предполагаю, что вы проверяете условие, только если условие истинно, поэтому, если необходимо проверить первое условие, тогда логический объект инициализируется как истинный в начале. Если он вернет true, тогда будет проверено следующее условие, иначе будет показано сообщение об ошибке. Я предполагаю, что это поток, который вы имеете в виду.

P.s: Также вы можете добавить Alert (); Первоначально сообщения в javascript для изучения потока кода, который помогает в устранении неполадок на начальных этапах.

Надеюсь, это решит проблему.

С уважением, Раджив

0 голосов
/ 20 апреля 2011

Ваша valide_form функция никогда ничего не сделает, потому что вы установили complete = false;

...