jQuery Validator, требуется любое поле

Question

Я пытаюсь убедиться, что пользователь входит в 1 из 2 полей: «ExactOrderSize» или «approxOrderSize».

<p>Exact size of your order (# of items)</p> 
<input id="ExactOrderSize" type="text" name="ExactOrderSize"> 

<p>Approximate size of your order</p> 
<select id="approxOrderSize" name="approxOrderSize" > 
    <option value="" selected="selected"></option> 
    <option value="0">0-35</option> 
    <option value="35">35-50</option> 
    <option value="50">50-100</option> 
</select> 

Для этого я пользуюсь помощью jQuery Validator. Все работает с ним хорошо, за исключением этого специального правила валидации, которое, кажется, ничего не делает.

$('#quoteform').validate({ 
    rules: { 
    FirstName: { 
     required: true 
    }, 
    LastName: { 
     required: true 
    }, 
    approxOrderSize: { 
     required: function() { 
     if($('#ExactOrderSize').val()=="") 
      return true; 
     else 
      return false; 
     } 
    }, 
    DateNeededBy: { 
     required: true 
    } 
    } 
}); 

Моя идея состояла в том, чтобы в основном запустить функцию, которая, если #ExactOrderSize поле не заполняется, сделал #approxOrderSize поле, необходимое. А.К.А. set required = true

Что мы обнаружили из ответов StackOverflow, так это то, что проблемы заключаются в том, что эти два поля потенциально скрыты. Когда страница сначала загружается ни #ExactOrderSize, ни #approxOrderSize изначально показаны.

Они должны нажать одну из этих двух кнопок, чтобы показать, что поле:

В зависимости от кнопки они выбирают, слайд-анимация показывает соответствующее поле.

"Да" -> Показывает поле #ExactOrderSize

"Нет" -> Показывает поле #approxOrderSize

Я, хотя это было бы хороший пользовательский интерфейс, но, по-видимому, он вызывает проблемы с сообщениями проверки, которые могут быть показаны, что делает работу JQuery Validation неработоспособной.

В качестве решения я попробовал:

$('#quoteform').submit(function() { 
    $('#not-exact').show(); 
    $('#yes-exact').show(); 
}); 

Таким образом, все поля будут показывать после того как форма представляет .. но она по-прежнему не работает.

P.S. Фактическая страница - HERE, если вы хотите ее посмотреть.

Answer 1

Я пытаюсь убедиться, что пользователь входит 1 из 2 полей

Существует уже правило, встроенный в этот плагин называется require_from_group, что делает именно это.

1. Включите the additional-methods.js file, чтобы получить это правило.

2. Добавить class в оба эти поля, ExactOrderSize и approxOrderSize. Что-то вроде ordersize.

3. Объявите правило в пределах .validate() метода, как это ...

   rules: { 
       ExactOrderSize: { 
        require_from_group: [1, '.ordersize'] 
       }, 
       approxOrderSize: { 
        require_from_group: [1, '.ordersize'] 
       }, 
       // your other fields/rules 
   }, 
   

4. Использование the groups option для обеспечения есть только одно сообщение об ошибке для обоих этих полей.

   groups: { 
       ordersize: "ExactOrderSize approxOrderSize" 
   }, 
   

5. Используйте the errorPlacement option, чтобы поместить сообщение об ошибке в положении, которое имеет смысл для этих двух полей.

   errorPlacement: function (error, element) { 
       if ($(element).hasClass("ordersize")) { 
        error.insertBefore(element.prev('p')); // custom error placement 
       } else { 
        error.insertAfter(element); // default error placement 
       } 
   } 
   

6. ПРИМЕЧАНИЕ: плагин будет игнорировать все скрытые поля по умолчанию. Чтобы отключить эту функцию, просто установите the ignore option на [], и ничто не будет проигнорировано. Затем вы можете просто отображать/скрывать поля ввода на основе некоторых пользовательских обработчиков событий.

Работа DEMO: http://jsfiddle.net/b0qe6Ljg/

Answer 2

Правила jQuery Validator применяются к элементам с соответствующим атрибутом name, а не к соответствующему атрибуту id. Попробуйте следующее:

OrderRange: { 
    required: function() { 
    if($('#exactOrderSize').val()=="") 
     return true; 
    else 
     return false; 
    } 
} 

Answer 3

Я думаю, это сработает для вас. Здесь я сделал вызов функции для отправки формы, которая проверяет один из двух элементов.

function validateMyForm() { 
 
    var a = document.getElementById('exsize').value.length; 
 
    var b = document.getElementById('opt').value.length; 
 
    if (a == 0 && b == 0) { 
 
    alert("Please fill either of the Fields"); 
 
    } else { 
 
    //success 
 
    } 
 
}

<form onsubmit='return validateMyForm()'> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="text" placeholder="Exact size of order" id="exsize" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select id="opt"> 
 
      <option value="" disabled selected>Select Size</option> 
 
      <option value="A">A</option> 
 
      <option value="B">B</option> 
 
      <option value="C">C</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="submit" value="submit" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 4

Игра вокруг с этим в поджигатель немного, я думаю, что у меня есть решение. Когда пользователь отправляет форму и вы выполняете проверку, прежде чем вы вернете true или false в валидацию для approxOrderSize, мы должны показать правильное поле и скрыть другое. Например, если пользователь ничего не вводил в поле ExactOrderSize, то при отправке формы валидатор для approxOrderSize проверяет, имеет ли значение значение ExactOrderSize.Если у него нет значения, спрячьте это поле и покажите approxOrderSize, , затем return true.

approxOrderSize: { 
    required: function() { 
    if($('#ExactOrderSize').val()=="") 
     $("#NoExact").trigger("click"); 
     return true; 
    else 
     $("#YesExact").trigger("click"); 
     return false; 
    } 
} 

По крайней мере, в моем экспериментирования, это похоже на работу, потому что это показывает поле, которое теперь требуется и показывает сообщение проверки для этого поля.