使用jQuery驗證器添加動態驗證規則的錯誤

Question

我正在使用jQuery驗證器插件以html格式。

客戶端腳本：Java腳本/ jQuery的

服務器端腳本：PHP

我先解釋一下形式。我的表單包含：

一）只接受電子郵件ID

B A文本框）一個textarea添加註釋。

c）中一個TextField輸入用戶的名稱

d）輸入手機號碼一個TextField（只接受號）

一個）和B）是永久居民我的形式。不管發生什麼事情，他們永遠保持形式。他們就像家人一樣。

c） and d）是臨時的。它們的存在取決於a）。這是電子郵件ID。

如果用戶輸入的電子郵件ID不在數據庫包含C）和d）進來的行動。用戶將不得不輸入他們的用戶名和手機號碼，所有這四個字段都需要驗證。如果不是，只有前兩個字段將被驗證。我有點在這裏搞砸了。

而且我使用客戶端的jQuery驗證器插件來驗證所有這些字段。服務器端也有驗證。我不會在這裏進入。讓我們暫時跳過它。

要檢查電子郵件存在，我使用插件的遠程功能。我嘗試了兩種方法來打開/關閉c）和d）的驗證規則，並且兩個都失敗了。 :)

<form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php" > 
    <div class="col-md-6 col-sm-6 title bg-black"> 
     <div class="form-group"> 
      <input type="text" id="email_id" name="email_id" class="form-control" placeholder="Email Address"> 
     </div> 

     <div class="form-group"> 
      <textarea type="text" id="product_description" name="product_description" class="form-control" placeholder="Comments"></textarea> 
     </div> 

     <div id="fullname_div" class="form-group" style="display:none;"> 
      <input type="text" id="full_name" name="full_name" class="form-control" placeholder="Your Full Name"> 
     </div> 

     <div id="mobilenum_div" class="form-group" style="display:none;"> 
      <input type="text" id="mob_num" name="mob_num" class="form-control" placeholder="Contact Number"> 
     </div> 

     <div class="col-md-12"> 
      <input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" /> 
     </div> 
    </div> 
</form> 

最初我保持手機號碼和名稱div的隱藏。如果電子郵件ID不匹配，我會向用戶展示他們。而那個時候，名稱和移動字段的類型將從隱藏變爲文本。否則，類型仍然隱藏。我在某處聽到隱藏的字段沒有得到驗證。這就是我採取這條路線的原因。

我以爲一開始就是小提琴。但是我正在與遙控器合作，所以它有點不合時宜，你知道。也許。

這裏的第一種方法我試過了。

$(document).ready(function() { 
    $('#product_description_form').validate({ 
     rules: { 
      email_id: { 
       email: true, 
       required: true, 
       remote: { 
        url: "checkemail_exist.php", 
        type: "post", 
        dataType: 'html', 
        data: { 
         email_id: function() { 
          return $("#email_id").val(); 
         } 
        }, 
        success: function(dataa) { 
         var condition = dataa.trim(); 

         //Invalid Data    
         if (condition == "2") 
         { 
          remove_validation();   
          document.getElementById('email_id').value = ''; 
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
          alert('Please enter a valid email id.'); 
         } 
         //Existing User 
         else if (condition == "1") 
         { 
          remove_validation();   
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
          document.getElementById('mob_num').type = 'hidden'; 
          document.getElementById('full_name').type = 'hidden'; 
          alert('We will contact you.'); 
         } 
         //New User 
         else if (condition == "3") 
         { 
          add_validation(); 
          document.getElementById('mob_num').type = 'text'; 
          document.getElementById('full_name').type = 'text'; 
          document.getElementById('mobilenum_div').style.display = 'block'; 
          document.getElementById('fullname_div').style.display = 'block'; 
          alert('New User.'); 
         } 
         else 
         { 
          remove_validation(); 
          document.getElementById('email_id').value = ''; 
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
         } 
        } 
       } 

      }, 
      product_description: { 
       required: true, 
       minlength: 10 
      } 

     }, 
     highlight: function(element) { 
      $(element).closest('.form-group').removeClass('success').addClass('error'); 
     }, 
     success: function(element) { 
      element.text('').addClass('valid') 
       .closest('.form-group').removeClass('error').addClass('success'); 
     } 
    }); 

function add_validation() 
{ 
    $("#full_name").rules("add", "required"); 
    $("#mob_num").rules("add", {number: true, required:true, minlength: 10, maxlength:12 }); 
} 

function remove_validation() 
{ 
    $("#full_name").rules("remove", "required"); 
    $("#mob_num").rules("remove", {number: true, required:true, minlength: 10, maxlength:12 });  
} 

}); 

猜猜是什麼？它沒有工作。我知道，我知道我在混合jQuery和JavaScript。但這只是一個演示。 無論如何，在我的第一個方法失敗後，我嘗試使用插件的依賴屬性。總有一個B計劃：d

這裏的第二種方法我想：

$(document).ready(function() { 
    //Function to validate 

    $('#product_description_form').validate({ 
     rules: { 
      email_id: { 
       email: true, 
       required: true, 
       remote: { 
        url: "checkemail_exist.php", 
        type: "post", 
        dataType: 'html', 
        data: { 
         email_id: function() { 
          return $("#email_id").val(); 
         } 
        }, 
        success: function(dataa) { 
         var condition = dataa.trim(); 

         //Invalid Data    
         if (condition == "2") 
         { 
          document.getElementById('email_id').value = ''; 
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
          alert('Please enter a valid email id.'); 
         } 
         //Existing User 
         else if (condition == "1") 
         { 
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
          document.getElementById('mob_num').type = 'hidden'; 
          document.getElementById('full_name').type = 'hidden'; 
          alert('We will contact you.'); 
         } 
         //New User 
         else if (condition == "3") 
         { 
          document.getElementById('mob_num').type = 'text'; 
          document.getElementById('full_name').type = 'text'; 
          document.getElementById('mobilenum_div').style.display = 'block'; 
          document.getElementById('fullname_div').style.display = 'block'; 
          alert('New User.'); 
         } 
         else 
         { 
          document.getElementById('email_id').value = ''; 
          document.getElementById('mobilenum_div').style.display = 'none'; 
          document.getElementById('fullname_div').style.display = 'none'; 
          document.getElementById('mob_num').value = ''; 
          document.getElementById('full_name').value = ''; 
         } 
        } 
       } 

      }, 
      product_description: { 
       required: true, 
       minlength: 10 
      }, 
      full_name: 
      { 
       required: 
       { 
        depends: function(element) 
        { 
         if (condition == "3") 
         { 
          return true; 
         } 
         else 
         { 
          return false; 
         } 
        } 
       } 

      }, 
      mob_num: 
      { 
       required: 
       { 
        depends: function(element) 
        { 
         if (condition == "3") 
         { 
          return true; 
         } 
         else 
         { 
          return false; 
         } 
        } 
       }, 
       number: true, 
       minlength: 10, 
       maxlength: 12 
      } 

     }, 
     highlight: function(element) { 
      $(element).closest('.form-group').removeClass('success').addClass('error'); 
     }, 
     success: function(element) { 
      element.text('').addClass('valid') 
       .closest('.form-group').removeClass('error').addClass('success'); 
     } 
    }); 

}); 

有時B計劃也失敗。所以我們找到了C計劃。就是這樣。 我哪裏都犯錯了？格拉西亞斯。

遠程方法正常工作。我甚至從checkemail_exist.php頁面獲得響應，並檢查成功內部是否有其他條件。但驗證規則不會相應地添加和刪除。

Answer 1

你接近它以錯誤的方式，你可以將隱藏的元素，則驗證規則將不會應用。

所以，你可以設置驗證規則，則可以使用一個變化的事件處理程序，可以設置基於電子郵件是否存在這些元素的顯示。

jQuery(function($) { 
 
    $('#product_description_form').validate({ 
 
    rules: { 
 
     email_id: { 
 
     email: true, 
 
     required: true, 
 
     }, 
 
     product_description: { 
 
     required: true, 
 
     minlength: 10 
 
     }, 
 
     full_name: { 
 
     required: true 
 
     }, 
 
     mob_num: { 
 
     number: true, 
 
     required: true, 
 
     minlength: 10, 
 
     maxlength: 12 
 
     } 
 
    } 
 
    }); 
 

 
    $('#email_id').change(function() { 
 
    //based on the value set the display state of those fields 
 
    //as a temp implementation we will just toggle the display 
 
    //using timeout to simulate a async ajax 
 
    setTimeout(function() { 
 
     $('#mobilenum_div, #fullname_div').toggle(); 
 
    }, 500); 
 
    }); 
 
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script> 
 
<form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php"> 
 
    <div class="col-md-6 col-sm-6 title bg-black"> 
 
    <div class="form-group"> 
 
     <input type="text" id="email_id" name="email_id" class="form-control" placeholder="Email Address"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <textarea type="text" id="product_description" name="product_description" class="form-control" placeholder="Comments"></textarea> 
 
    </div> 
 

 
    <div id="fullname_div" class="form-group" style="display:none;"> 
 
     <input type="text" id="full_name" name="full_name" class="form-control" placeholder="Your Full Name"> 
 
    </div> 
 

 
    <div id="mobilenum_div" class="form-group" style="display:none;"> 
 
     <input type="text" id="mob_num" name="mob_num" class="form-control" placeholder="Contact Number"> 
 
    </div> 
 

 
    <div class="col-md-12"> 
 
     <input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" /> 
 
    </div> 
 
    </div> 
 
</form>