1

私は初心者で、フォームを検証するためのコードを次のように作成しました。

function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("First name must be filled out");
return false;
  }}
  <!-- html part-->
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><br>

このコードの問題は、送信ボタンを押すとvalidateForm関数がトリガーされることです。オブジェクトがフォーカスを失ったときに関数を呼び出す方法は?

4

3 に答える 3

2

これは私の問題に対する正確な解決策です。オブジェクトがフォーカスを失ったときにユーザーが何らかの通知を受け取る場所:

<script>
function validate(){
var y = document.getElementById("errorResponse");
var x=document.forms["myForm"]["fname"].value;
    if (x==null || x==""){
        y.innerHTML = "Error";
    }
}
</script>

HTML フォームは次のとおりです。

<form name="myForm">
First name: <input type="text" name="fname" onBlur = "validate()">
<div id = "errorResponse"></div>
<input type="submit" value="Submit">
</form>

CSS で div を赤色に設計してユーザーの注意を引くことができ、さらに多くのトリックを実行できます。

于 2012-09-02T05:54:11.790 に答える
1

入力要素のコードを次のように置き換えます

<input type="text" onblur="return validateForm();" name="fname">

私はそれがあなたが探しているものだと思います

于 2012-05-19T06:35:04.263 に答える
0 
<html>
<head>
<script type="text/javascript">
      function validateForm(oForm){
    var els = oForm.elements;
    for(var i = 0; i < els.length; i++){
       if('string' === typeof(els[i].getAttribute('data-message'))){
          return valEl(els[i]);
       }
    }
} 

function valEl(el){
    var method = el.getAttribute('data-valMethod');
    if('req' === method && (el.value === null || el.value === '')){
           alert(el.getAttribute('data-message'));
           return false;
    }
} 
</script>
</head>
<body>
<form name="myForm" action="#" onsubmit="return validateForm(this)" method="post">
First name: 
    <input data-message="First name must be filled out" data-valMethod="req" onchange="return valEl(this)"; name="fname"><br />
<input type="submit" value="Submit">
</form>
</body>

</html>​​​​​​​​​​​​​​​​​​​

フォーム要素に必要なデータメッセージ属性がある場合、「onchange」で要素を検証できる1つの関数と、form.onsubmit()で各要素の検証を開始する別の関数に分割しました。
HTML5 以来、Data-* 属性はこれらのことに対して非常に便利です :-)

代わりに要素自体への参照を渡すため、フォームと要素の名前を検証スクリプトに保存する必要がなくなります。これは常に良いことです。

ここから、valEl 関数を拡張して、他のタイプの検証に対応できます。

これまでの唯一の制限は、要素ごとに 1 つのタイプの検証しか存在できないことですが、それは簡単に回避できるはずです。

ハッピーコーディング。/G

PS http://jsfiddle.net/ePPnn/11/サンプルコード

于 2012-05-19T08:22:10.100 に答える