验证卡在第一次验证

我是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>

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

就像其他人说的那样，您试图在条件中访问用户名，其中条件为总是 false。您将complete=false设置为start，然后尝试查看它是否为真。

顺便说一下，clear_all()在第一次验证之前可能没有您想要的行为。它将隐藏屏幕上的所有输入，所以如果有任何其他错误，你将无法看到。我应该选择隐藏在末尾(或者像@mplungjan所说的那样隐藏在开头，并且总是取决于你需要什么)，也许重用你的if(complete)结构:

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

另外，在声明用户名验证有效之后，您应该在其他方法中返回一个布尔值=)

EDIT:另外，检查别人说的错误是一个高优先级的问题。

EDIT2:我转身看到一个重复的条件。现在我把它删掉了。要继续以这种方式使用if(complete)，还应该做以下更改:

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

别慌。

每个人都必须从某个地方开始，当你刚刚开始学习的时候，这是非常令人沮丧的。

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

你没有提交输入类型;而不是选择一个普通的按钮。这不一定是个问题，除非JavaScript中没有任何地方真正提交表单。这意味着每次有人单击"Send"按钮时，它将触发您定义的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)">

请注意，我从该元素中删除了一个额外的"form"。

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

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()函数返回的值。

请从这个开始(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" />

相关内容

最新更新

热门标签：