Question

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

我正在尝试使用javascript（或jquery - 不确定区别）根据定期表单验证检查切换提交按钮的“已禁用”属性。当我将所有内容键入表单时，它工作正常，但如果我从第一个密码字段复制并粘贴到第二个密码字段，则不会从按钮中删除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>

Answer 1

您可以将onKeyUp侦听器添加到文本字段，并禁用，或者如果值正确，则启用该按钮的已禁用属性。

HTML：

    <input type="text" onkeyup="validate(this)" />

JavaScript的：

   function validate(textfield) {

   var submitButton = document.getElementById("submit_button");
   submitButton.disabled = true;
   if(textfield.value == "good") {
          submitButton.disabled = false;
   }
   }

这样的事情应该是好的。

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

Answer 2

你没有打电话给你的支票功能你应该使用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();
  });

希望有所帮助

Answer 3

我不完全确定您的代码有什么问题，但这绝对有效并且是更好的方法：

$(':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');
    }
});

javascript - 表单验证 - 禁用按钮

3 个答案: