ページリフレッシュなしのフォーム検証

Question

私は検証が必要なフォームを持っています。私のフォームは、4つの要素、articleType選択ボックス、articleTitle入力ボックス、articleUrl入力ボックス、およびnumPages選択ボックスを含みます。私のarticleTypeとnumPages選択ボックスが必要です。私のarticleTitleとarticleUrlの入力ボックスは、両方とも必須で、最小長は10でなければなりません。フォームは更新されません。入力された入力が正しい場合、次のページに進みます。ここで

は私のコードです：私の現在のコードで

HTML

<div style="display: none" class="article_Information"> 


         <form class="article_information_form" action="" method="POST"> 
          <p>Article type</p> 
          <select name="articleType" required> 
           <option value="" disabled="disabled" selected></option> 
           <option value="Lifestyle">Lifestyle</option> 
           <option value="Entertainment">Entertainment</option> 
           <option value="Society">Society</option> 
           <option value="Strange">Strange</option> 
           <option value="Science">Science</option> 
           <option value="Tech">Tech</option> 
          </select><br> 
          <p>Title </p> 
          <input id="articleTitle" type="text" name="articleTitle" maxlength="75" required> 

          <p style="clear: both">Article URL</p> 
          <input id="articleUrl" type="text" name="articleUrl" maxlength="65" required><br> 
          <div style="display: block; margin: 20px; color: gray"> 
          <p style="text-align: center; font-weight: normal; font-size: 15px; display: inline; font-style: italic; clear: both; float: none">URL:</p><p id="urlDisplay" style="text-align: center; font-weight: normal; font-size: 15px; display: inline"></p> 
          </div> 
          <p>Number of pages</p> 
          <select id="numPages" name="numPages" required> 
           <option value="" disabled="disabled" selected></option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
           <option value="6">6</option> 
           <option value="7">7</option> 
           <option value="8">8</option> 
           <option value="9">9</option> 
           <option value="10">10</option> 
           <option value="11">11</option> 
           <option value="12">12</option> 
           <option value="13">13</option> 
           <option value="14">14</option> 
           <option value="15">15</option> 
          </select><br> 

          <input id="btn" type="submit" name="article_info_btn" value="Submit"> 
         </form> 
        </div> <!--End of article information div--> 

jQueryの

<script type="text/javascript"> 


     $(".article_information_form").validate({ 
     //specify the validation rules 
     rules: { 
      articleType: "required", 
      numPages: "required", 
      articleTitle: { 
      required: true, 
      minlength: 10 
      }, 
      articleUrl: { 
      required: true, 
      minlength: 10 
      } 
     }, 

     //specify validation error messages 
     messages: { 
     articleType: "First Name field cannot be blank!", 
     numPages: "Last Name field cannot be blank!", 
     articleTitle: { 
     required: "Password field cannot be blank!", 
     minlength: "Your password must be at least 6 characters long" 
     }, 
     articleUrl: "Please enter a valid email address" 
     }, 
     }); 

$('.article_information_form').on('submit', function(e) { 
        e.preventDefault(); 
        $.ajax({ 
         type: 'POST', 
         url: '', 
         data: $(this).serialize(), 
         success: function(data) { 
          $(".article_Information").fadeOut("slow"); 
          $(".article_properties").fadeIn("slow"); 
          $("#addOne").fadeIn("slow"); 
          numPages = $('#numPages option:selected').val(); 
          $('.pageNumber').text(numPages); 
          $('.inputNumber').text(numPages); 
         } 
        }); 
       }) 

、それはエラーメッセージを表示し、次のページに移動します。ユーザーが間違いを訂正するまで、現在のページにどのようにしておくことができますか？また、私はPHPがフォームを検証するのがより効果的であることを知っていますが、この場合はまだそれが良いでしょうか？もしそうなら、PHPを使ってエラー・メッセージを表示できるように、どのように情報をAjaxに戻すことができますか？

Answer 1

フォームは、これは文句を言わないので、文句を言わないページに、これは働いていた