6

初級レベルでJavaScriptを知っていますが、問題があります。

フォームに7 つの入力要素があり、それらすべてに入力したいと考えています。私はこのアイデアを思いつきましたが、それはうんざりしています。

すべてのフォーム要素が入力されているかどうかを確認する方法を教えてもらえますか?

function validateForm()
{
var x=document.forms["register"]["name"].value;
var y=document.forms["register"]["phone"].value;
var z=document.forms["register"]["compname"].value;
var q=document.forms["register"]["mail"].value;
var w=document.forms["register"]["compphone"].value;
var e=document.forms["register"]["adres"].value;
var r=document.forms["register"]["zip"].value;
if (x==null || x=="" || y==null || y=="" || z==null 
|| z=="" || q==null || q=="" ||  w==null || w=="" || e==null || e=="" 
|| r==null || r=="")
{
alert("Please fill all the inputs");
return false;
}
}
</script>
4

4 に答える 4

13

これは単純で汚れた方法です。

より良い方法は、フィールドが必須であるという検証メッセージを更新することです。

function validateForm()
{
  var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]

  var i, l = fields.length;
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.forms["register"][fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
  return true;
}
于 2013-07-29T20:31:36.787 に答える
6

いくつかの単純なバニラ JS を使用すると、これをより単純な方法で処理できます。

JavaScript

function validateForm(){
    var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true;
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        if(!input.value) {
            flag = false;
            input.focus();
            alert("Please fill all the inputs");
            break;
        }
    }
    return(flag);
}

次にreturn、フォーム内の関数がインラインであることを確認してください（悪い習慣）：

<form name="register" id="register" method="post" action="path/to/handler.php" onsubmit="return validateForm();">

または、より目立たない方法で:

window.onload = function(){
    var form = document.getElementById("register");
    form.onsubmit = function(){
        var inputs = form.getElementsByTagName("input"), input = null, flag = true;
        for(var i = 0, len = inputs.length; i < len; i++) {
            input = inputs[i];
            if(!input.value) {
                flag = false;
                input.focus();
                alert("Please fill all the inputs");
                break;
            }
        }
        return(flag);
    };
};
于 2013-07-29T20:40:13.890 に答える
-2

これを行うことができます：

//Declare variables
var 1, 2, 3, 4, 5, 6, 7;
1 = document.getElementById("Field Id");
2 = document.getElementById("Field Id");
3 = document.getElementById("Field Id");
4 = document.getElementById("Field Id");     //Define variable values
5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");

//Check if any of the fields are empty
If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") {
  alert("One or more fields are empty!");
  //Other code
}

私はこれを自分のフォームに使用しましたが、スペースをとったり、「醜い」ように見えたりすることなく、うまく機能します。すべてのフィールド要素に対して機能し、入力された値をチェックします。

于 2013-07-30T18:21:35.850 に答える