Fatal编程技术网
  • javascript/
  • javascript-表单验证-禁用按钮

javascript-表单验证-禁用按钮

javascript jquery validation

javascript-表单验证-禁用按钮,javascript,jquery,validation,setinterval,Javascript,Jquery,Validation,Setinterval,我是编程新手，所以如果这是一个愚蠢的问题，请原谅我 我正试图让javascript（或者jquery——不确定是否有区别）根据定期的表单验证检查切换submit按钮的“disabled”属性。当我将所有内容输入表单时，它可以正常工作，但是如果我将第一个密码字段复制并粘贴到第二个密码字段，则不会从按钮中删除disabled属性 任何帮助都将不胜感激 Javascript $(':input').focusin(function(){ $(this).css('backg

我是编程新手，所以如果这是一个愚蠢的问题，请原谅我

我正试图让javascript（或者jquery——不确定是否有区别）根据定期的表单验证检查切换submit按钮的“disabled”属性。当我将所有内容输入表单时，它可以正常工作，但是如果我将第一个密码字段复制并粘贴到第二个密码字段，则不会从按钮中删除disabled属性

任何帮助都将不胜感激

Javascript

      $(':input').focusin(function(){

       $(this).css('background-color','#AABEFF');

        }).blur(function(){

       $(this).css('background-color','white');
          });

      function check(){

      if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
      ($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")){

           if (($('#password1').val())==($('#password2').val()))
              {
              $('#submit').removeAttr('disabled');
              }

           else

            {
             $('#submit').attr('disabled','disabled');
            }
      }

        else

            {
             $('#submit').attr('disabled','disabled');
            }
      }

      window.setInterval(check, 200);
表格

        <html>
        <head>

          <link rel="stylesheet" type="text/css" href="style.css" />
        </head>

              <body>
                 <div id="back">
                 </div>

                <div id="wrapper">

                        <div id="header">
                         <div id="logout">
                        <?php
                      include 'employer_header.php';
                        ?>

                         </div>

                        </div>

                        <?php
                        include 'employer_menu.php';
                        ?>

                        <div id="feature">
                        </div>
                        <div id="content">

                        <div class="pad">

        <form method="post" action="employer_register_process.php">

        <p>First Name: <br>
        <input id="first" type="text" name="firstname" size="30"><br></p>
        <p>Last Name: <br>
        <input id="last" type="text" name="lastname" size="30"><br></p>
        <p>Phone 1: <br>
        <input id="phone1a" type="text" name="phone1a" style='width:30px' maxlength="3">-
        <input id="phone1b" type="text" name="phone1b" style='width:30px' maxlength="3">-
        <input id="phone1c" type="text" name="phone1c" style='width:40px' maxlength="4"><br></p>
        <p>Phone 2 (Optional): <br>
        <input type="text" name="phone2a" style='width:30px' maxlength="3">-
        <input type="text" name="phone2b" style='width:30px' maxlength="3">-
        <input type="text" name="phone2c" style='width:40px' maxlength="4"><br></p>
        <p>email: <br>
        <input id="email" type="text" name="email" size="30"><br></p>
        <p>password: <br>
        <input id="password1" type="password" name="pass1" size="30" mask="x"><br></p>
        <p>retype password: <br>
        <input id="password2" type="password" name="pass2" size="30" mask="x"><br></p>


        <p ><input id='submit' type="submit" name='submit' value='register' disabled='disabled'></p>
        </form>

                      </div>
                      </div>
                      </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/register.js"></script>
              </body>
        </html>


名字：



姓氏：



电话1:

-
-


电话2（可选）：

-
-


电子邮件：



密码：



重新键入密码：
您可以将onKeyUp侦听器添加到文本字段，并使其禁用按钮的disabled属性，或者如果该值正确，则启用按钮的disabled属性

HTML:

像那样的东西应该很好

哦，JQuery是一个构建在Javascript之上的框架。

您没有调用检查函数。
您应该使用jquery.keyup（）函数来检查
以下是您的文件的外观示例：

$(':input').focusin(function(){

    $(this).css('background-color','#AABEFF');

}).blur(function(){

    $(this).css('background-color','white');

});

function checkForm(){

  if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
  ($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")){

       if (($('#password1').val())==($('#password2').val()))
          {
          $('#submit').removeAttr('disabled');
          }

       else

        {
         $('#submit').attr('disabled','disabled');
        }
  }

    else

        {
         $('#submit').attr('disabled','disabled');
        }
  }

  $('#password2').keyup(function(){
         checkForm();
  });
希望这会有所帮助

我不完全确定您的代码有什么问题，但这确实有效，而且是一种更好的方法：

$(':input').focusin(function(){
    $(this).css('background-color','#AABEFF');
}).blur(function(){
    $(this).css('background-color','white');
});

$('input').keyup(function(){

    if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
  ($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")) {

        if ( $('#password1').val() == $('#password2').val() ) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled','disabled');
        }

    } else {
       $('#submit').attr('disabled','disabled');
    }
});
请复制或类似内容，以帮助我们在不必自己重新创建代码的情况下查看正在运行的代码。如果您要说明这…是一种更好的方式，请提供一个清晰的解释，说明为什么它“更好”，以及与原始版本有关的问题。我的评论并非有意讽刺，我只是要求更多、解释性的，信息；为了了解您对问题中公布的职能/方法所做的更改。我质疑你关于你的方法“更好”的说法的理由是，如果没有解释，这是一个不受支持的断言，并且可能具有煽动性/挑衅性，没有“为什么”的背景。此外，这里也是为了教育/教导他人；为什么对这一点很重要。为什么在我发布的代码中。但是，回想起来，可能最好使用keyup事件，我已经修改了我的答案来表示这一点。不，您发布的代码显示了您所做的事情，并显示了您所采取的方法；它没有说明原因。然而，我得到的印象是，这是我们不太可能达成一致的事情，因此我不会再继续下去（尽管我愿意这样做，但我并不想对事情无礼或冒犯）。作为结束语，是的：我认为
keyup
是更好的方法，因为它响应更快、更明显。提供JavaScript答案的要点（尽管我现在添加了jQuery标记）。这不仅是香草JS，而且比公认的答案更简洁优雅。 
$(':input').focusin(function(){

    $(this).css('background-color','#AABEFF');

}).blur(function(){

    $(this).css('background-color','white');

});

function checkForm(){

  if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
  ($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")){

       if (($('#password1').val())==($('#password2').val()))
          {
          $('#submit').removeAttr('disabled');
          }

       else

        {
         $('#submit').attr('disabled','disabled');
        }
  }

    else

        {
         $('#submit').attr('disabled','disabled');
        }
  }

  $('#password2').keyup(function(){
         checkForm();
  });

$(':input').focusin(function(){
    $(this).css('background-color','#AABEFF');
}).blur(function(){
    $(this).css('background-color','white');
});

$('input').keyup(function(){

    if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
  ($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")) {

        if ( $('#password1').val() == $('#password2').val() ) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled','disabled');
        }

    } else {
       $('#submit').attr('disabled','disabled');
    }
});