0

http://jsfiddle.net/3vHxF/これが私が試したものです

そして私のhtmlコードは：

 <form id="commentForm" style="width:200px;" name="MYFORM" action="#">
                  <label>
                     <strong>Enquiry Form </strong>
                  </label>
                  <label>Name</label>
                  <input id="name" type="text" size="30" name="name">
                  <label>Phone No</label>
                  <input id="phone" type="text" size="30" name="phone">
                  <label>Email</label>
                  <input id="email" type="text"size="30" name="email">
                  <label>Message</label><br>
                  <textarea id="message" name="message"></textarea>
                  <input id="Send" type="submit" value="Send" onclick="send()">
                  </form>

Javascript is :

var name=getElementById('name');
var phone=getElementById('phone');
var email=getElementById('email');
var mess=getElementById('message');

function send(){

if(name==null&&phone==null&&email==null&&mess==null)
    alert('field is empty');
}

空のフィールドにアラートを出すと同時に、簡単に書きたいと思います。プラグインを提案しないでください。

4

5 に答える 5

2

あなたの問題:

  • HTMLInputElement オブジェクトをテストしており、それらが保持する値をテストしていません (したがって、値を取得します)
  • 文字列をnull（空の文字列と比較して）比較しています
  • あなたの失敗条件は、それらのいずれかが失敗するのではなく、それらすべてが失敗することに基づいています（使用するかどうかと）

そのような：

if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "")
    alert('field is empty');
}

どれが空かを判断するにifは、s を使用した単一のステートメントではなく、一度に 1 つずつテストする必要があります||。

于 2013-03-20T13:26:25.120 に答える
2

ボタンからクリック ハンドラーを削除し、フォームに送信ハンドラーを配置します。

<form id="commentForm" onsubmit="return validat(this);" ... >

これで、簡単な検証を行うことができます:

function validate(form) {
  var control;
  var isValid = true;

  for (var i=0, iLen=form.elements.length; i<iLen; i++) {
    control = form.elements[i];

    if (control.value == '') {
      alert('Field ' + control.name + ' is empty'); 
      isValid = false;
    }
  }
  return isValid; // false cancels submit
}

これは非常に最小限の検証スクリプトですが、これが始まりです。

ちなみに、フォーム コントロールには (成功するために必要な) 名前があるため、ID は必要ありません。

于 2013-03-20T13:33:05.950 に答える
1

変化する

var name=getElementById('name');
var phone=getElementById('phone');
var email=getElementById('email');
var mess=getElementById('message');

に

  var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var email=document.getElementById('email').value;
var mess=document.getElementById('message').value;

そして使用する

if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "")
    alert('field is empty');
}
于 2013-03-20T13:44:30.343 に答える
1

クリーンなアプローチではありません。しかし、以下のコードを開発してみてください。

var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var email=document.getElementById('email').value;
var mess=document.getElementById('message').value;

function send(){

if(isEmpty(name, 'name') || isEmpty(phone, 'phone') || isEmpty(email, 'email') || isEmpty(mess, 'message')) {
  return false;
    }
    return true;
}

function isEmpty(val, fld) {
    if(val && val != null) {
        return true;
    }
    alert(fld +" is Empty");
    return false;
}
于 2013-03-20T13:31:07.817 に答える
0

次の jQuery を使用できます。

$(":text,textarea").each(function() {
    $(this).css("outline", $(this).val() ? "1px solid red" : "none");
});

申し訳ありませんが、「プラグインなし」は「jQuery プラグインなし」を意味すると思っていました。(「プラグイン」ではなく、jQuery をライブラリまたは依存関係と呼びます)

これは、ほとんどテストされていない非 jQuery バージョンです。

function highlightMissingInputs() {
    for (var formIndex = 0; formIndex < document.forms.length; formIndex++) {
        var form = document.forms[formIndex];
        for (var inputIndex = 0; inputIndex < form.length; inputIndex++) {
            var input = form[inputIndex];
            switch (input.tagName) {
                case "INPUT":
                    var typeAttribute = input.attributes.type;
                    if (typeAttribute) {
                        var type = (typeAttribute.value || "").toLowerCase();
                        switch (type) {
                            case undefined:
                            case "":
                            case "text":
                            case "email":
                            case "tel":
                            case "email":
                            case "search":
                                break;
                            default:
                                continue;
                        }
                    }
                    break;
                case "TEXTAREA":
                    break;
                default:
                    continue;
            }

            input.style.outline = input.value ? "none" : "1px solid red";
        }
    }
}
于 2013-03-20T13:24:24.713 に答える