2017-03-28 25 views
0

我很難理解jQuery驗證插件如何與自定義方法一起工作。對於我在這裏找到的所有指南,無論是輸入表單還是靜態但我的價值觀有點不同。jQuery驗證插件檢查字段中的「total_cost」是否大於「user_credit」值

我有2個div,就像2個值,一個是「user_credit」的值,它存儲了多少用戶有信用。另一個是存儲一些特殊選項總成本的「total_cost」。

問題和差異,我有和沒有在任何指南中找到的是,我的「total_cost」動態更改基於以前的複選框值。

這裏的部分代碼來自:

<div class="row"> 
       <div class="col-lg-12"> 
        <label for="link_to_video">Link to video <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product video. Youtube videos will be automatically embedded"></i></label> 
        <div class="form-group"> 
         <div class="input-group"> 
          <span class="input-group-addon"> 
           <input type="checkbox" name="show_video" id="show_video" value="1" data-price="40"> 
          </span> 
          <input type="text" class="form-control" name="link_to_video" id="link_to_video" placeholder="https://youtube.com/watch?v"> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-lg-12"> 
        <label for="link_to_product">Link to product <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product"></i></label> 
        <div class="form-group"> 
         <div class="input-group"> 
          <span class="input-group-addon"> 
           <input type="checkbox" name="show_product" id="show_product" value="1" data-price="40"> 
          </span> 
          <input type="text" class="form-control" name="link_to_product" id="link_to_video" placeholder="http://yourwebsite.com/product-page"> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="form-inline"> 
        <div class="col-lg-12"> 
         <h4>Your credit <span class="label label-default" id="user_credit">2000</span></h4> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="form-inline"> 
        <div class="col-lg-12"> 
         <h4>Total cost <span class="label label-default" id="total_price">0</span></h4> 
        </div> 
       </div> 
      </div> 

這裏是當一些複選框從上面檢查發現改變「TOTAL_PRICE」價值的部分代碼。

$inputs=$('#show_product,#show_video').change(function(){ 
    var total=0; 
    $inputs.filter(':checked').each(function(){ 
     total+= $(this).data('price'); 
    }); 
    $("#total_price").text(total); 
}); 

而另一件事是,所有的導遊激活JavaScript的驗證,而我在形式上它自

<form action="" name="createListingForm" id="createListingForm" method="POST" role="form" data-toggle="validator" enctype="multipart/form-data"> 

我一直在關注從這裏https://jqueryvalidation.org/documentation/文檔激活,並尋找導遊的很多,但沒有運氣尋找解決方案

回答

0

首先,您可以而不是驗證span容器內的文字。使用此插件,您只能驗證textarea,select,某些類型的input元素以及具有contenteditable屬性的元素......並且它們全都是必須必須在form容器內。其次,如果您動態更改這些表單輸入之一的值,則只需調用.valid()方法以編程方式在此輸入上觸發驗證。

$('#myinput').valid(); // trigger a validation test of #myinput element 
相關問題