Question

我是JavaScript的新手，我的表单验证工作正常，但即使经过验证，也会继续跳转以验证提交时的用户名。继承我的代码

function validate_form(form)
{
   var complete=false;

    if(complete)
    {
        clear_all();
          complete = checkUsernameForLength(form.username.value);
    }

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

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

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

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

function clear_all()
{
    document.getElementById('usernamehint').style.visibility= 'hidden';
    /*.basicform.usernamehint.style.backgroundColor='white';*/

    document.getElementById("countrthint").style.visibility= 'hidden';
    /*document.basicform.countrthint.style.backgroundColor='white';*/

    document.getElementById("subhint").style.visibility= 'hidden';
    /*document.basicform.subject.style.backgroundColor='white';*/

    document.getElementById("phonehint").style.visibility= 'hidden';
    /*document.basicform.phone.style.backgroundColor='white';*/

    document.getElementById("emailhint").style.visibility= 'hidden';
    /*document.basicform.email.style.backgroundColor='white';*/
}

 heres the functions 

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;
    }
}

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 = "";
    }
}

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 = "FAILS";
    }
}

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);

 and heres my form 

       <form form method="post" action="mailto:s00103684@mail.itsligo.ie"  name="basicform" id="basicform" > 

                 <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="subject" onkeyup="checkaddress(this);" /> 
                        <span class="hint" id="subhint">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" id="phonehint">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" id="emailhint">You can enter your real address without worry - we don't spam!</span> 
                    </fieldset> 


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

请指出业余编码员正确的方向谢谢

Answer 1

请从此开始（http://jsfiddle.net/4aynr/4/）

function validate_form(form)
{
   var complete=false;
   clear_all();
   complete = checkUsernameForLength(form.username); // pass the FIELD here

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

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

    if (complete)
    {
        complete = checkphone(form.phone.value);
    }
    if (!complete) alert('something went wrong')

    return complete;
}

并更改

<form form method="post" action="mailto:s00103684@mail.itsligo.ie"  
name="basicform" id="basicform" >

到

<form method="post" action="mailto:s00103684@mail.itsligo.ie"  
name="basicform" id="basicform" 
onSubmit="return validate_form(this)">

并更改

 <input value="send" type="button" onclick="validate_form(this.form)"/>

到

 <input value="send" type="submit" />

Answer 2

不要惊慌。

每个人都必须从某个地方开始，当你只是学习绳索时，这可能会非常令人沮丧。

在回答这个问题时，我们不仅需要查看您的JavaScript，还需要查看HTML。

您没有提交输入类型;而是选择常规按钮。这不一定是个问题，除非您在JavaScript中实际提交表单。这意味着每次有人单击“发送”按钮时，它将触发您已定义的validate_form（）函数，但不会对其执行任何操作。让我们做一些改变：

使用提交输入替换您的按钮：

<input value="send" type="submit" />

接下来，将以下代码添加到表单标记中，以便我们定义用户尝试提交表单时要执行的操作：

onsubmit="validate_form(this)"

所以你的整个表单标签现在看起来像这样：

<form method="post" action="mailto:s00103684@mail.itsligo.ie"  name="basicform" id="basicform" onsubmit="return validate_form(this)">

注意我从该元素中删除了一个额外的“表单”。

好的，接下来我们要处理表单准备好验证时会发生什么。

function validate_form(form)
{
      // ...we can step through each item by name and validate its value.
      var username = checkUsernameForLength(form["username"].value);
      var email = checkaddress(form["country"].value);

      // ...and so on.
      return (username && email && {my other return values});
}

您调用的每个方法（例如CheckUsernameForLength）都应返回true或false，具体取决于输入是否有效。

我们的最后一次返回可能有点不优雅，但是这是一个汇总返回值并查看是否存在任何“失败”值的方法的详细示例。如果所有方法都返回true，则最后一次返回将评估为true。否则（显然）它将返回false。

表单的提交取决于您的validate_form（）函数返回的值。

Answer 3

正如其他人所说，您正试图在条件始终 false的条件下访问用户名。您在开始时和之后设置complete=false，然后尝试查看是否为真。

顺便说一下，clear_all（）在第一次验证之前可能没有你想要的行为。它将隐藏屏幕中的所有输入，因此如果还有其他错误，您将无法看到。我应该在最后（或者像@mplungjan所说的那样开始隐藏，并且总是取决于你需要的东西），也许重用你的if（完整）结构：

function validate_form(form)
{
    clear_all();
    var complete = checkUsernameForLength(form.username.value);

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

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

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

此外，在说明用户名验证工作后，您应该在其他方法中返回一个布尔值=）

编辑：此外，检查其他人所说的错误是一个高优先级问题。

EDIT2 ：我转身看到了重复的情况。现在我删除了它。要继续使用if（完整）方式，您还应该进行以下更改：

function checkaddress(whatYouTyped)
{
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length <10)
    {
        fieldset.className = "welldone";
        return true; // <-- this change
    }
     else
    {
        fieldset.className = "";
        return false; // <-- and this change
    }
}

此外，更改其他方法以在需要时返回true和false。

验证在第一次验证时停留

3 个答案: