如何在 jquery 验证引擎中指定自定义无效条件？

Question

我有两个 select 个盒子，每个盒子都有一些值

我想验证以下条件：如果值 Value 1 大于 Value 2 中的值，则应显示错误提示并且表单应 NOT 提交。

这是代码

$(document).ready(function(){
    $("#formid1").validationEngine('attach');
});

function testfunc(value1id, value2id)
{
    var val1 = $('#'+value1id+'').val();
  var val2 = $('#'+value2id+'').val();
    if(val1 !== '' && val2 !== '')
  {
    if(parseFloat(val1) > parseFloat(val2))
    {
        $('#'+value2id+'').validationEngine('showPrompt', 'Value 1 should be smaller than Value 2', 'error', true);
    }
  }
}

Here 是 fiddle

代码有效并显示错误提示，但表单已提交。

有什么办法可以让验证引擎不仅显示错误提示，还验证条件，直到条件满足才提交表单？

Answer 1

是的。可以做到。您不必为此功能使用验证引擎。

我只是在您的下拉列表中使用了表单的 onSubmit 事件和 required 属性。

检查这个片段。我在这里修改了你的 fiddle 的代码..

function testfunc() {
  var val1 = $('#value1select').val();
  var val2 = $('#value2select').val();
  if (val1 !== '' && val2 !== '') {
    if (parseFloat(val1) > parseFloat(val2)) {
      return true;
    } else {
      alert("ERROR PROMPT!")
      return false;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' name="formid1" id="formid1" onSubmit="return testfunc()">
  <br />
  <br />
  <div>
    <table>
      <tr>
        <td>Value 1</td>
        <td>
          <select id="value1select" required >
            <option value="">---Select---</option>
            <option value="-1">-1</option>
            <option value="-2">-2</option>
            <option value="-3">-3</option>
            <option value="-4">-4</option>
            <option value="-5">-5</option>
            <option value="-190">-190</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Value 2</td>
        <td>
          <select id="value2select" required>
            <option value="">---Select---</option>
            <option value="0">0</option>
            <option value="-1">-1</option>
            <option value="-2">-2</option>
            <option value="-3">-3</option>
            <option value="-4">-4</option>
            <option value="-5">-5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input type="submit" value="Submit" />
        </td>
      </tr>
    </table>

  </div>

</form>

如何在 jquery 验证引擎中指定自定义无效条件？

How to specify custom invalid condition in jquery validation engine?

javascript

validation

jquery

jquery-validation-engine