Форма -> База данных с проверкой jQuery

Question

Я немного застрял в своей форме, и я не знаю, как решить мою текущую проблему. Я сделал форму, чтобы пользователь мог изменить свой пароль. Я хочу проверить форму с помощью jQuery. Поэтому я использую плагин от http://jqueryvalidation.org/!

Функция обновления и поэтому форма работает. Кроме того, если я ввожу, например, пароль с тремя буквами, я получаю сообщение об ошибке, так что проверка jQuery тоже работает.

Моя проблема заключается в том, что я могу отправить форму EVEN, если есть некоторые проблемы, такие как пароли, не равные или пароль слишком короткий. Форма отправляется каждый раз, когда я нажимаю кнопку «Отправить».

Я не очень хороший jQuery, но я кое-что прочитал о submitHandler, и я попробовал (см. Мой код ниже), но он не работает.

Может ли кто-нибудь сказать мне, как мой код должен выглядеть так, чтобы форма была отправлена ​​только в том случае, если она прошла проверку jQuery? Я не хочу менять свой PHP-код, если это возможно, потому что я использую функции для вставки и обновления моей базы данных. Было бы здорово, если бы кто-то мог мне помочь.

<?php 

    $sessioninfo=getSessionInfo($sid); 
    $gl_userid=$sessioninfo["pers_id"][0]; 
    $userdata=getUserInfo($gl_userid,0); 



    if (isset ($_POST['submit'])) { 

     $content=array("password"=>crypt($pwdnew1)); 
     updateUserInfo($gl_userid,$content); 

     if(updateUserInfo($gl_userid, $content)==TRUE){ 
     $msg_success ="Your password was changed successfully!"; 
     } else { 
     $msg_error ="ERROR! Your password could not be changed caused by an error! Please check and try again..."; 
     } 

    } 

    print "<div class='widget-box'>"; 
    print "<div class='widget-header'>"; 
    print "<h5 class='widget-title'>You can change your Password here</h5>"; 
    print "</div>"; 
    print "<div class='widget-body'>"; 
    print "<div class='widget-main'>"; 
    print "<form class='form-horizontal' name='changepwd' id='changepwd' action='./index.php' method='post'>\n"; 
    print "<input type='hidden' name='func' value='chpwd'>\n"; 
    print "<input type='hidden' name='sid' value='".$sid."'>\n"; 
    print "<div class='form-group'>"; 
    print "<label for='inputName' class='col-sm-4 control-label'>Your ID:</label>"; 
    print "<div class='col-sm-6'>"; 
    print "<input type='text' class='form-control' name='yourid' id='yourid' placeholder='Your ID' value='$gl_userid' readonly>"; 
    print "</div>"; 
    print "</div>"; 
    print "<div class='form-group'>"; 
    print "<label for='inputOldPassword' class='col-sm-4 control-label'>Your old Password:</label>"; 
    print "<div class='col-sm-6'>"; 
    print "<input type='password' class='form-control' name='pwdold' id='pwdold' placeholder='Enter your current Password'>"; 
    print "</div>"; 
    print "</div>"; 
    print "<div class='form-group'>"; 
    print "<label for='inputNewPassword' class='col-sm-4 control-label'>New Password:</label>"; 
    print "<div class='col-sm-6'>"; 
    print "<input type='password' class='form-control' name='pwdnew1' id='pwdnew1' placeholder='Enter your new Password'>"; 
    print "</div>"; 
    print "</div>"; 
    print "<div class='form-group'>"; 
    print "<label for='inputRepeadPassword' class='col-sm-4 control-label'>Repead your new Password:</label>"; 
    print "<div class='col-sm-6'>"; 
    print "<input type='password' class='form-control' name='pwdnew2' id='pwdnew2' placeholder='Enter your new Password'>"; 
    print "</div>"; 
    print "</div>"; 
    print "<div class='form-group'>"; 
    print "<div class='col-sm-offset-5 col-sm-4'>"; 
    print "<button type='submit' name='submit' value='submit' class='btn btn-warning btn-lg btn-block'>Change Password</button>"; 
    print "</div>"; 
    print "</div>"; 
    print "</form>"; 

    if(isset($msg_success)){ echo '<div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a>'.$msg_success.' </div>'; } 
    if(isset($msg_error)){ echo '<div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert">&times;</a>'.$msg_error.' </div>'; } 

    print "</div>"; 
    print "</div>"; 
    print "</div>"; 

    print "<script src='./bootstrap/assets/js/jquery.validate.js'></script>"; 
    print "<script src='./bootstrap/assets/js/additional-methods.js'></script>"; 

?> 

     <script type="text/javascript"> 
      $('#changepwd').validate({ 
        errorElement: 'div', 
        errorClass: 'help-block', 
        focusInvalid: false, 
        ignore: "", 
        rules: { 
         pwdold: { 
          required: true, 
          pwdold:true 
         }, 
         pwdnew1: { 
          required: true, 
          minlength: 5 
         }, 
         pwdnew2: { 
          required: true, 
          minlength: 5, 
          equalTo: "#pwdnew1" 
         } 

        }, 

        highlight: function (e) { 
         $(e).closest('.form-group').removeClass('has-info').addClass('has-error'); 
        }, 

        success: function (e) { 
         $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info'); 
         $(e).remove(); 
        }, 

        errorPlacement: function (error, element) { 
         if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) { 
          var controls = element.closest('div[class*="col-"]'); 
          if(controls.find(':checkbox,:radio').length > 1) controls.append(error); 
          else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0)); 
         } 
         else if(element.is('.select2')) { 
          error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)')); 
         } 
         else if(element.is('.chosen-select')) { 
          error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)')); 
         } 
         else error.insertAfter(element.parent()); 
        }, 

        submitHandler: function (form) { 
        $.post("index.php", $("#changepwd").serialize()); 
        }, 

        invalidHandler: function (form) { 
        } 
       }); 
     </script> 

Answer 1

Похоже, что следующая строка:

    pwdold: { 
         required: true, 
         pwdold:true 
        }, 

Если вы сделаете что:

    pwdold: "required", 

It should work. Я не знаю, что вы пытались сделать с этой линией pwdold:true.

Теперь, говоря, давайте поговорим о нескольких вещах.

• Во-первых, в дополнение к проверке на стороне клиента, вы должны иметь проверку на стороне сервера. Я могу отключить javascript в своем браузере и отключить проверку на стороне клиента. Поэтому вам нужно будет дублировать эти правила в php. Кроме того, вы можете настроить проверку на стороне сервера в форме submit, которая отвечает тем, что не так, и имеет только подтверждение в одном месте.

• Во-вторых, вы делаете HTML все неправильно. PHP, на каком-то уровне, язык шаблонов. Вы можете закрыть теги php, написать html и открыть новые теги php, если вам нужно больше php. Вы даже можете посмотреть в более явную систему шаблонов, например twig или blade.

• В-третьих, если это в любом случае должно быть более простым экспериментальным упражнением, и это то, что вы ожидаете от людей, я настоятельно рекомендую вам изучить и использовать фреймворк. Мои личные предпочтения - Laravel. У них много хорошей документации и ресурсов. Если вы хотите бросить свой собственный, у The PHP League есть несколько хороших пакетов, которые помогут вам в этом.

• В-четвертых, выезд phptherightway. Это невероятно полезное введение в создание приложений с PHP и может сэкономить вам много головной боли в будущем.

• Наконец, помните, что вы должны always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.