歐芹驗證器 - 至少需要一個字段

Question

我的表單中有四個輸入元素（即文本框），供用戶輸入不同的電話號碼，例如辦公室，手機，家庭等（這些輸入字段不一定在一個div /組）提交之前，我想驗證這些電話號碼。條目並確保至少有一個電話號碼是由用戶輸入的。如果沒有電話號碼。字段有效的條目我的表單不應該得到驗證，不應該發佈。

我使用ParsleyJS庫進行驗證並使用knockout.js。

我具有以下在我Razor視圖爲一個場碼（其餘三個字段與此類似）：

 <div class="col-md-3 clmargin"> 
      <div class="form-group col-md-4 zeropadding div2adjustments"> 
       @Html.LabelFor(m => m.Handphone, new { @class = "fieldtext" }) 
      </div> 
      <div class="col-md-8 "> 
       <input type="text" class="form-control fieldtextinput input-sm" maxlength="10" minlength="8" data-parsley-type="digits" 
         data-bind="value:Handphone, disable:ViewMode() == 'View'" id="handphone"> 
      </div> 
     </div> 

我已經給定id到我在上面的代碼輸入即「手提電話」。

Javascript代碼：

$(document).ready(function() { 
    $('#contact').parsley().subscribe('parsley:form:validate', function (formInstance) { 

     // if one of these blocks is not failing do not prevent submission 
     // we use here group validation with option force (validate even non required fields) 
     if (document.getElementById("other").value == '' && document.getElementById("telephone").value == '' && 
      document.getElementById("office").value == '' && document.getElementById("handphone").value == ''){ 
      // else stop form submission 
      formInstance.submitEvent.preventDefault(); 
      // and display a gentle message 
      $('.invalid-form-error-message') 
       .html("Provide atleast one contact no") 
       .addClass("filled"); 
      return; 
     } 
     $('.invalid-form-error-message').html(''); 
     return; 
    }); 
}); 

有了上面的腳本代碼，它可以檢測無效的情況，但並不妨礙形式提交。

我已經採取了上面的腳本代碼here

Answer 1

有在Parsley.js條件驗證沒有簡單的方法呢。你可以看看Marc's answer瞭解更多信息。

你可能需要調整這個代碼，以滿足您的需求，但你可以做這樣的事情（jsfiddle）：

<div class="invalid-form-error-message"></div> 
<form id="demo-form"> 
    <input type="text" name="field1" required data-parsley-errors-messages-disabled /> 
    <input type="text" name="field2" required data-parsley-errors-messages-disabled /> 
    <input type="text" name="field3" required data-parsley-errors-messages-disabled /> 
    <input type="text" name="field4" required data-parsley-errors-messages-disabled /> 
    <input type="submit" /> 
</form> 

<script> 
$(document).ready(function() { 
    $('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) { 
     // If any of these fields are valid 
     if ($("input[name=field1]").parsley().isValid() || 
      $("input[name=field2]").parsley().isValid() || 
      $("input[name=field3]").parsley().isValid() || 
      $("input[name=field4]").parsley().isValid()) 
     { 
      // Remove the error message 
      $('.invalid-form-error-message').html(''); 

      // Remove the required validation from all of them, so the form gets submitted 
      // We already validated each field, so one is filled. 
      // Also, destroy parsley's object 
      $("input[name=field1]").removeAttr('required').parsley().destroy(); 
      $("input[name=field2]").removeAttr('required').parsley().destroy(); 
      $("input[name=field3]").removeAttr('required').parsley().destroy(); 
      $("input[name=field4]").removeAttr('required').parsley().destroy(); 

      return; 
     } 

     // If none is valid, add the validation to them all 
     $("input[name=field1]").attr('required', 'required').parsley(); 
     $("input[name=field2]").attr('required', 'required').parsley(); 
     $("input[name=field3]").attr('required', 'required').parsley(); 
     $("input[name=field4]").attr('required', 'required').parsley(); 

     // stop form submission 
     formInstance.submitEvent.preventDefault(); 

     // and display a gentle message 
     $('.invalid-form-error-message') 
      .html("You must correctly fill the fields of at least one of these two blocks!") 
      .addClass("filled"); 
     return; 
    }); 
}); 
</script> 

請注意，您需要添加data-parsley-errors-messages-disabled對您的輸入，所以你不要看不到每個人的錯誤信息。