jquery検証エンジンでカスタム無効条件を指定するにはどうすればよいですか？

Question

私は価値の値1、値2の値よりも大きい場合、エラープロンプトが表示されるはずとフォームがを提出しないでください、という条件のために検証するいくつかの値

を持つ2つの選択ボックスそれぞれを持っています。

これはコード

$(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では、コードが動作すると、エラープロンプトが表示されますが、フォームが提出フィドル

です。

検証エンジンにエラープロンプトを表示するだけでなく、条件を検証し、条件が満たされるまでフォームを送信させないようにする方法はありますか？

Answer 1

はい。これを行うことができます。このような検証エンジンを使用する必要はありません。

フォームのonSubmitイベントとドロップダウンリストのrequired属性を使用しました。

このスニペットを確認してください。私はここであなたのフィドルのコードを変更した。..

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>