Formularüberprüfung ohne Seitenaktualisierung

Question

Ich habe ein Formular, das überprüft werden muss. Mein Formular enthält vier Elemente, ein Auswahlfeld für artikelTyp, ein Eingabefeld für artikelTitel, ein Eingabefeld für artikelUrl und ein Auswahlfeld für numPages. Die Auswahlfelder artikelTyp und numPages müssen benötigt werden. Die Eingabefelder articleTitle und articleUrl müssen beide erforderlich sein und mindestens eine Länge von 10 haben. Mein Formular wird nie aktualisiert. Wenn die Eingabe korrekt ist, wird die nächste Seite angezeigt.

Hier ist mein Code:

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); 
         } 
        }); 
       }) 

Mit meinem aktuellen Code, wird es die Fehlermeldungen angezeigt werden und dann auf die nächste Seite gehen . Wie kann ich es auf der aktuellen Seite bleiben lassen, bis der Benutzer seine Fehler korrigiert? Außerdem weiß ich, dass es für PHP effektiver ist, ein Formular zu validieren, aber in diesem Fall wäre es immer noch besser? Wenn ja, wie kann ich Informationen an Ajax zurückleiten, damit Fehlermeldungen mit PHP angezeigt werden können?

Answer 1

zu überprüfen, ob das Formular gültig ist oder nicht, diese

verwenden

$('.article_information_form')[0].checkValidity() // returns true or false 

dies nicht Ihre Form einreichen, aktualisieren Sie so pflegt die Seite