jQuery Validator, сделайте любое поле обязательным

Я пытаюсь убедиться, что пользователь вводит 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 поле не было заполнено, сделал

7
jquery jquery-validate validation

4 ответов

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

в этот плагин уже встроено правило под названием require_from_group что делает именно это.

  1. включить the чтобы получить это правило.

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

  3. объявить правила в the .validate() способ такой...

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

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

    groups: {
    ordersize: "ExactOrderSize approxOrderSize"
},

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

    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 опции to [] и ничто не будет проигнорировано. Затем вы можете просто показать/скрыть поля ввода на основе некоторых пользовательских обработчиков событий.

рабочая демо:http://jsfiddle.net/b0qe6Ljg/

4

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

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

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

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

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

1

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

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>
0