How to specify custom invalid condition in jquery validation engine?

Question

I have two select boxes each with some values

I want to validate for condition that, if value Value 1 is greater than value in Value 2 then the error prompt should show and the form should NOT submit.

This is the code

$(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 is the fiddle

The code works and displays the error prompt but the form submits.

Is there any way to tell validation engine to not just display the error prompt but to validate the condition and don't let the form submit until the condition is satisfied?

Answer 1

Yes. It can be done.. You don't have to use validation engine like that for this functionality..

I have simply used onSubmit event of form and required attribute in your dropdown.

Check this snippet. I have modified the code of your fiddle in here..

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>