javascript - проверка формы - отключенная кнопка - PullRequest
Новая
       1

javascript - проверка формы - отключенная кнопка

2 голосов
/ 05 декабря 2011

Я новичок в программировании, поэтому, пожалуйста, прости меня, если это глупый вопрос ...

Я пытаюсь, чтобы javascript (или jquery - не уверен в разнице) переключал свойство '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>

Ответы [ 3 ]

0 голосов
/ 05 декабря 2011

Вы не вызываете свою функцию проверки.
Вы должны использовать функцию 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();
  });

надеюсь, что поможет

0 голосов
/ 05 декабря 2011

Я не совсем уверен, что не так с вашим кодом, но это определенно работает и является лучшим способом сделать это: 

$(':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');
    }
});
0 голосов
/ 05 декабря 2011

Вы можете добавить прослушиватель 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.

...