HTMLフォームにエラーメッセージを表示し、ユーザーがエラーを修正した後にこのメッセージを削除します。

HTML5と基本的なJavaScriptを使用して簡単なアプリケーションを構築しようとしています。私はそれが働いているが、私は簡単なことをやっている（少なくとも私が使用した他の言語では単純です）。ここに私の現在のコードは次のとおりです。ユーザーは0から200までの数値を入力した場合、私の<output>はこのoutputは、上記のjavascriptから計算し、正しい答えを持っています表示するためにHTMLフォームにエラーメッセージを表示し、ユーザーがエラーを修正した後にこのメッセージを削除します。

<!DOCTYPE html> 
<html> 
     <head> 
      <title>JS Test</title> 
      <meta charset="utf-8" /> 
     </head> 

     <script> 
      function isTrackValid(track_a, track_b) { 
       if(track_a > 200.0 || track_a < 0.0) { 
        return "Number must be between 0 BPM and 200 BPM"; 
       } 
       if(track_b > 200.0 || track_b < 0.0) { 
        return "Number must be between 0 BPM and 200 BPM"; 
       } 
       return ""; 
      } 

      function calculate(track_a, track_b) { 
       if(track_a > track_b) { 
        return ((track_a - track_b)/track_a) * 100; 
       } else if(track_a < track_b) { 
        return ((track_a - track_b)/track_b) * 100; 
       } else { 
        return 0.0; 
       } 
      } 

      function main() { 
       track_a = input_a.valueAsNumber; 
       track_b = input_b.valueAsNumber; 

       var message = isTrackValid(track_a, track_b); 
       if(message !== "") { 
        $('#error_message').text(message); 
       } else { 
        var result = calculate(track_a, track_b); 
        return result.toFixed(2); 
       } 
      } 
     </script> 
     <body> 
      <header> 
       <h1>JS Test</h1> 
      </header> 
      <form onsubmit="return false" oninput="o.value=eval(main());"> 
       Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"><br/> 
       Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"><br/> 
       <br /> 
       <div id="error_message"></div> 
       Output: <output name="o" step="0.01" for="a b"></output> 
      </form> 
     </body> 
</html>

私が持って欲しいです。ユーザーが負数または200を超える数値を入力した場合は、エラーを<output>フィールドに入力します。

エラーが発生した場合、現在のコード（およびStackOverflowでの回答の結果として<div>）を使用すると、Outputを上回ります。しかし、ユーザーが有効な番号を入力すると、このエラーはそこに残り、決して消えません。

エラーを解消できるかどうか疑問に思っていましたか？それとも無効な場合はOutputに行かせることができるのですか？

出典

2016-03-29 Alex

フィドルを追加してください –

@GopsABには、エラーを表示しないように思われます。 net/jthjzsjx/ – Alex

_ $（ '＃error_message'）にjqueryをインクルードしましたか？ – C2486

You are not removing error message if value is valid. Also note, instead of using eval , you can bind events using JavaScript Event Binding on [type = number] elements.

これを試してみてくださいます。https：// jsfiddle JSFiddle経由でこれを行う

function isTrackValid(track_a, track_b) { 
 
    if (track_a > 200.0 || track_a < 0.0) { 
 
    return "Number must be between 0 BPM and 200 BPM"; 
 
    } 
 
    if (track_b > 200.0 || track_b < 0.0) { 
 
    return "Number must be between 0 BPM and 200 BPM"; 
 
    } 
 
    return ""; 
 
} 
 

 
function calculate(track_a, track_b) { 
 
    if (track_a > track_b) { 
 
    return ((track_a - track_b)/track_a) * 100; 
 
    } else if (track_a < track_b) { 
 
    return ((track_a - track_b)/track_b) * 100; 
 
    } else { 
 
    return 0.0; 
 
    } 
 
} 
 

 
function main() { 
 
    track_a = input_a.valueAsNumber; 
 
    track_b = input_b.valueAsNumber; 
 
    var message = isTrackValid(track_a, track_b); 
 
    if (message !== "") { 
 
    $('#error_message').text(message); 
 
    } else { 
 
    $('#error_message').text(message); 
 
    var result = calculate(track_a, track_b); 
 
    return result.toFixed(2); 
 
    } 
 
} 
 

 
var elems = document.querySelectorAll('[type="number"]'); 
 
[].forEach.call(elems, function(elem) { 
 
    elem.addEventListener('input', main); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form onsubmit="return false"> 
 
    Track A: 
 
    <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"> 
 
    <br/>Track B: 
 
    <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"> 
 
    <br/> 
 
    <br /> 
 
    <div id="error_message"></div> 
 
    Output: 
 
    <output name="o" step="0.01" for="a b"></output> 
 
</form>

Fiddle here

出典

2016-03-29 05:09:21 Rayon

HTMLフォームにエラーメッセージを表示し、ユーザーがエラーを修正した後にこのメッセージを削除します。

答えて

関連する問題