1

私はこのHTMLフォームを使用しており、フィールドを検証しようとしています。JavaScriptを使用して各フィールドが空でないことを確認したいと思います。フィールドが空の場合、非表示の関連divを表示したいと思います。

現在の問題：両方のフィールドが空のままの場合、proNameの最初のdivのみが表示され、2番目のdivは表示されません。どうすれば両方を表示させることができますか？

 <html>
 <body>
 <form action="" method="post" class="form" name="form" onsubmit="return validateForm();">
      <p><label for="proName">Processors Name: </label>
           <input type="text" name="proName" id="proName"></p>
                <div id="alertProName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>

      <p><label for="compName">Company Ordered Through: </label>
           <input type="text" name="compName" id="compName"></p>
                <div id="alertCompName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>
 </form>

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;
      }
 };

 function validateForm() {
      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };
 </script>
 </body>
 </html>

ありがとうございました！

4

5 に答える 5

3 
function validateForm(){
  var valid = true;
  var x=document.forms["form"]["proName"].value;                    
  if (x==null || x=="") {
    document.getElementById("alertProName").style.display="block"; //show the error message
    valid = false;
  }else{
    document.getElementById("alertProName").style.display="none"; // hide the error message
  }
  var z=document.forms["form"]["compName"].value;                   

  if (z==null || z=="") {
    document.getElementById("alertCompName").style.display="block";//show the error message
    valid = false;
  }else{
    document.getElementById("alertCompName").style.display="none"// hide the error message
  }
  return valid; // only if both are valid will we submit
}
于 2013-01-11T20:29:52.843 に答える
1

クライアント側は常にそれをバイパスできるため、フォームクライアント側を検証することはお勧めできません。

ただし、本当にクライアント側でフォームを検証する場合は、HTML5フォーム検証を使用できます。

<input type="text" name="somefield" required />

required属性は、フィールドが必須であることをブラウザに通知します。

HTML5 DOCTYPE（）を使用していることを確認してください<DOCTYPE HTML>。

例： http： //jsbin.com/ubuqan/1/edit

于 2013-01-11T20:36:40.783 に答える
0

何が行われるかを確認すると便利validateForm()です...
両方の検証メソッドのラッパーであり、1回の呼び出しでどちらのdivを表示するかを決定する必要があると思います。現時点では、validateProNamefalseが返された場合は、実行する必要はありません。validateCompName

次のようなことをしてもらいます。これは、validateProNameとvalidateCompNameの両方の値をローカル変数に割り当て、値がfalseの場合はそれらのdivを表示します。次に、既存のメソッドを単純化します...

<script type="text/javascript">
function validateForm() {
  var pro= validateProName();
  var comp = validateCompName();
  if (!pro) {
      var s = document.getElementById("alertProName").style.display="block";
  }
  if (!comp) {
      var a = document.getElementById("alertCompName").style.display="block";
  }
}
</script>
于 2013-01-11T20:30:13.430 に答える
0

それらを1つの機能にまとめてみませんか。

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;

      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };

これはあなたが望むことを達成しますか？

アンドリュー

于 2013-01-11T20:31:04.137 に答える
-1

フォームを次のように変更します。

<form action="" method="post" class="form" name="form" onsubmit="return validateForm(this);">

次に、divを表示するための1つの関数が必要です。

<script type="text/javascript">
function validateForm(form) {
    for (e in form.elements) {
        var element = form.elements[e];

        if (element.type == "text") {
            console.log(element.name);
            var elementName = element.name;
            elementName = "alert" + elementName.charAt(0).toUpperCase() + elementName.slice(1);
            var alertElement = document.getElementById(elementName);
            if (alertElement)
                alertElement.style.display = "block";
        }
    }

    return false;
}
</script>

これは、テキストフィールドがある場合は常に、「アラート」が前に付いた同じ名前のDIVも付随していることを前提としています。

于 2013-01-11T20:33:07.927 に答える