0

こんにちは、私はhtmlとjavascriptに非常に慣れていません。フォームを検証しようとしています。ユーザーが正しい形式で日付を入力しない場合、有効な日付を入力するように求める段落を入力の下に表示します。私は子を追加することでこれを行うことができました。ただし、正しい日付を入力しても子供を削除できませんでした。それは本当に単純なことだと確信していますが、オンラインで見てもうまくいきませんでした。また、パラがまだ存在しない場合にのみパラを追加する方法があるかどうか疑問に思っています。以下はコードです。

function checkDate(date) 
{       
    var result;
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
    result = expression.test(date.value);
    var para=document.createElement("p");
    var node=document.createTextNode("Enter a valid Date");
    para.appendChild(node);
    var element=document.getElementById(date.id).parentNode;

    if(!result===true)
    {   
        element.appendChild(para);  
    }

    else
    {

        element.removeChild(para);
    }       
}
4

4 に答える 4

0

パラを非表示にして、必要に応じてのみ表示および非表示にする方が簡単です。たとえば、

<p id="para">Enter a valid Date</p>

に、使用できる表示/非表示

document.getElementById('para').style.display = 'none'; // hide
document.getElementById('para').style.display = 'block'; // show

しかし、要素を削除するように要求したので、次のように実行できます

var para = document.getElementById('para');
para.parentNode.removeChild(para);

しかし、これを行うには、次のように作成するidときにパラに追加する必要があります

var para=document.createElement("p");
para.id = 'para';

MDN の Node.removeChild

于 2013-08-26T21:56:39.973 に答える
0

空の <span id="dateError"></span> を追加して内容を変更することをお勧めします。

しかし、あなたのコードでは:

JavaScript を使用する場合、HTML で最も重要な属性「id」が欠落しています。

ID を使用して各要素を識別できます。私はあなたのコードを修正しました、そしてそれは今働いています。重複の可能性も防ぎます：

function checkDate(date) 
{       
var result;
var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
result = expression.test(date.value);
var para=document.createElement("p");
var para.id = "dateError"; //NEW
var node=document.createTextNode("Enter a valid Date");
para.appendChild(node);
var element=document.getElementById(date.id).parentNode;

if(!result===true)
    {   
        if(document.getElementById("dateError") == null) return; //NEW
        element.appendChild(para);  
    }

    else
    {
        //element.removeChild(para);
        document.getElementById("dateError").remove(); //NEW
    }

}
于 2013-08-26T21:56:43.587 に答える
0

div入力 ID に基づいて、エラーに一意の ID を付けます。まだ存在しない場合にのみ再作成してください。このようにして、入力ごとに異なるエラー メッセージを表示できます。

function checkDate(date) 
{       
  var result;
  var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;

  result = expression.test(date.value);

  var errid = date.id + "-error";

  var para = document.getElementById(errid);
  var newp = false;

  if (! para) {
    newp = true;
    var para=document.createElement("p");
    para.id = errid;
    var node=document.createTextNode("Enter a valid Date");
    para.appendChild(node);
  }

  var element=document.getElementById(date.id).parentNode;

  if(!result===true)
    {   
      if (newp)
        element.appendChild(para);  
    }
    else
    {
      if (! newp)
        element.removeChild(para);
    }
}

作業例: http://codepen.io/paulroub/pen/HIDAC

于 2013-08-26T21:57:39.763 に答える