Нужно потребовать только одну группу полей с Parsley

Question

Я использую Parsley.js для проверки отправки формы на проект. Одна из моих потребностей состоит в том, чтобы заставить Parsley потребовать, чтобы по крайней мере одно из трех полей имело данные в них и только отказывалось проверять, если ни одно из трех полей не имеет данных.

Я не уверен в документации, как это сделать. У меня уже есть проверка Parsley, работающая над остальной частью формы.

Answer 1

Мой совет, чтобы добавить скрытый флажок элемент с атрибутом:

данные петрушка-mincheck = «1»

теперь просто добавить яваскрипт кода, который проверяет скрытый атрибут флажка, если ваши вход формы имеет значение (и наоборот).

обратите внимание, что вам нужно будет добавить дополнительный атрибут вашего скрытого флажок:

данные петрушка-сообщения об ошибке = «Пожалуйста, заполните по крайней мере, один вход»

Answer 2

Другого подход заключается в используя data-parsley-group и метод isValid({group,force}).

<input type="text" name="input1" data-parsley-group="group1"> 
<input type="text" name="input2" data-parsley-group="group2"> 
<input type="text" name="input3" data-parsley-group="group3"> 

$('#myform').parsley().on('form:validate', function (formInstance) { 
    if(formInstance.isValid({group: 'group1', force: true}) || 
     formInstance.isValid({group: 'group2', force: true}) || 
     formInstance.isValid({group: 'group3', force: true})) { 
     //do nothing 
    } 
    else {   
     $('#errorContainer').html('You must correctly fill at least one of these three groups!'); 
     formInstance.validationResult = false; 
    } 
}); 

1. вы можете добавить столько, сколько атрибутов петрушки, как вы хотите, как data-parsley-type="email", что будет проверяться, когда данный вход не пуст.

2. мы установили force: true, потому что это заставляет проверять даже на необитаемых полях.

3. рендеринг html для ошибкиContainer необходим, поскольку метод isValid не влияет на пользовательский интерфейс и не вызывает события.

Answer 3

Вы можете сделать это с помощью валидатора, как так

var CheckReccursion = 0; 
    window.Parsley.addValidator('min3', { 
     validateString: function (value, requirement, instance) { 
      var notice =$('#notice').html(' '); 

      var group = $(requirement);//a class 

      var FieldsEmpty = 0; 
      var FieldsNotEmpty = 0; 
      var count = 0 

      group.each(function() { 

       var _val = $(this).val() 
       var length = _val.length 

       if (length > 0) { 
        FieldsNotEmpty++; 
       } 
       else { 
        FieldsEmpty++; 
       } 
       count++; 
      }) 

      var isValid = (FieldsNotEmpty >=1) 
      //recursively execute 
      group.each(function (index) { 
       if (CheckReccursion === index) { 
        CheckReccursion++; 
        $(this).parsley().validate(); 
        CheckReccursion = 0; 
       } 
      }) 
      return isValid; 
     } 
    }); 

$(function() { 
    var ok=false; 
    var notice =$('#notice'); 

    $('#form1').parsley().on('form:validated', function(formInstance) { 
     ok = formInstance.isValid({force: true}); 
    }) 
    .on('form:submit', function() { 
     if(!ok){ 
      notice.html('Please fill at least 1 field'); 
      return false; 
     } 
     else{ 
      notice.html('okay'); 
      return false;//change to true to submit form here 

     } 
    }); 
}); 

затем добавить петрушку атрибуты к группе полей, как так:

<form id="form1" data-parsley-validate="true"> 
    <input type="text" name="field1" 

    data-parsley-min3 = ".group1" 
    data-parsley-min3-message = "At least 1 must be filled" 
    class="group1"> 



    <input type="text" name="field2" 

    data-parsley-min3 = ".group1" 
    data-parsley-min3-message = "At least 1 must be filled" 
    class="group1"> 

    <input type="text" name="field3" 

    data-parsley-min3 = ".group1" 
    data-parsley-min3-message = "At least 1 must be filled" 
    class="group1"> 



    <span id="notice"></span> 
    <input type="submit" value="Submit"> 

</form> 

проверить эту скрипку https://jsfiddle.net/xcoL5Lur/6/