验证卡在第一个验证处

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

请将业余编码器指向正确的方向，谢谢

已邀请:

3 个回复

佩疵瓦

就像其他人所说的那样，您试图在条件始终为假的条件下访问用户名。您在开始时设置complete=false，此后立即尝试查看是否为真。顺便说一句，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);
    }
}

此外，在说明了用户名验证工作之后，您应该在其他方法中返回布尔值=）编辑：此外，检查别人说的错误是一个高度优先的问题。 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中没有任何地方实际提交表单。这意味着每当有人单击“发送”按钮时，它将触发您已定义的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\" />

要回复问题请先登录或注册

验证卡在第一个验证处

3 个回复

发起人

html

javascript

css

问题状态

验证卡在第一个验证处

与内容相关的链接

3 个回复

发起人

html

javascript

css

问题状态