表格沒有得到驗證

我已經創建了一個表單來在數據庫中添加一條記錄，所以插入記錄和所有工作都很好。表格沒有得到驗證

我想把表單的驗證，現在發生了什麼，雖然我已經設置了所需的字段，然後也點擊提交按鈕後表單正在提交和空白值越來越插入n數據庫。

我已經提到這個鏈接進行驗證：

但不知何故，它不是爲我工作。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Post</title> 

</head> 
<body> 

<form class="postForm" id="postForm" method="post" action="addPost.php"> 


    <fieldset> 
     <legend>Please add the details below </legend> 
     <p> 
      <label for="title">Title (required, at least 2 characters)</label> 
      <input id="title" name="title" minlength="2" type="text" required> 
     </p> 

     <p> 
      <label for="url">URL (required)</label> 
      <input id="url" type="url" name="url" required> 
     </p> 

     <p> 
      <label for="desc">Description (required, at least 2 characters)</label> 
      <input id="desc" name="desc" minlength="2" type="text" required> 
     </p> 

     <p> 
      <label for="keywords">Keywords (eg:#facebook)(required, at least 2 characters)</label> 
      <input id="keywords" name="keywords" minlength="2" type="text" required> 
     </p> 

     <p> 

      <label for="urlType">Select Url Type :(required)</label> 
      <select name="urlType" id="urlType"> 
       <option value="">Select Url Type...</option> 
       <option value="0">Server Image</option> 
       <option value="1">Server Video</option> 
       <option value="2">YouTube Video</option> 
       <option value="3">Vimeo Video</option> 
       <option value="4">Facebook Image</option> 
       <option value="5">Facebook Video</option> 
       <option value="6">Instagram Image</option> 
       <option value="7">Instagram Video</option> 
       <option value="-1">Other</option> 
      </select> 
     </p> 

     <p> 


      <label for="postType"> Select Post Type :(required)</label> 
      <select name="postType" id="postType"> 
       <option value="">Select Post Type...</option> 
       <option value="0">Normal</option> 
       <option value="1">Featured</option> 
       <option value="2">Sponsored</option> 

      </select> 
     </p> 
     <p> 


      <label for="category"> Select Category :(required)</label> 
      <select name="category" id="category"> 
       <option value="0">Select Category...</option> 

      </select> 
     </p> 



     <p> 
      <input type="hidden" name="action_type" id="action_type_id"/> 
      <input type="hidden" name="id" id="p_id"/> 
<!--   <a href="javascript:void(0);" class="btn btn-warning" onclick="$('#postForm').slideUp();">Cancel</a> 
      <a href="javascript:void(0);" class="btn btn-success" onclick="userAction('add')">Add User</a>--> 
      <input type="button" name="Submit" id="Submit" value="Submit" onclick="userAction('add')"> 


     </p> 

    </fieldset> 

    <div class="result" id="result"></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 

     $(document).ready(function(){ 
      getCategories(); 
     }); 

     function getCategories() { 

      $.ajax({ 
       type: "POST", 
       url: 'getCategories.php', 
       dataType: 'text', 
       async: false, 
       cache: false, 
       success: function (result) { 

        $('#category').html(result); 
       } 
      }); 
     } 
     function userAction(type,id){ 

      var statusArr = {add:"added",edit:"updated",delete:"deleted"}; 

      if (type == 'add') { 

       $('#action_type_id').val(type); 
       $('#p_id').val(id); 
      } 
      $.ajax({ 
       type: 'POST', 
       url: 'addPost.php', 
       data: $('#postForm').serialize(), 
       success:function(report){ 
        // replace data to report 
        $(".result").html(report); 

        $("#postForm").trigger('reset'); 
       } 
      }); 
     } 

    </script> 
</form> 
<script> 
    $("#postForm").validate(); 
</script> 
</body> 
</html>

請幫幫忙，謝謝你..

來源

2017-04-07 Sid

請不要edi用正確的代碼來處理你的問題。它只會導致混淆，因爲正確的答案已經在下面發佈。 – Sparky

需要參考JQuery驗證

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

然後需要初始化插件，演示的例子 -

$('#postForm').validate({ 
    submitHandler: function (form) { // for demo 
     userAction('add'); 
    } 
});

刪除onclick你射擊的onsubmit，需要從submitHandler

調用 userAction

演示http://jsfiddle.net/xs5vrrso/

來源

2017-04-07 08:11:52

它不工作沒有類型提交的按鈕，如果類型現在提交它的顯示驗證，但空白表單也提交。請檢查編輯的問題。 – Sid

謝謝你的工作.. – Sid

按鈕的類型應該是 '提交' 的提交。希望這有助於。

來源

2017-04-07 08:03:57

但是然後ajax函數不工作我把驗證代碼在userAction函數內，並嘗試過，現在它顯示驗證，但onclick按鈕形式沒有得到提交addPost.php – Sid

表格沒有得到驗證

回答

相關問題