JavaScriptフォームの検証 - 値の長さとブロックされた単語のリスト

Question

この問題は解決されました！私が達成しようとしていることを知っているので、これは将来の誰かの助けになるでしょう ....基本的に人々がフォームを提出するとき、私はスクリプトが値の長さをチェックしたい入力は少なくとも特定の数です。また、ユーザーが特定の単語を入力していないことも確認してください。彼らが禁止された単語の1つを正確に入力した場合、または十分な文字でない値を入力した場合は、スクリプトを失敗させ、入力値を送信せず、divのCSS表示をnone封鎖する。

ここに更新された作業用のJavaScriptがあります。

JAVASCRIPT: 
function wordcheck() { 
var words = ['words','Words']; 
if(document.getElementById('top').value.length < 5){ 
var error = document.getElementById('error'); 
error.style.display = 'block'; 
     return false; 
    } 
if(document.getElementById('bottom').value.length < 5){ 
var error = document.getElementById('error'); 
error.style.display = 'block'; 
     return false; 
    } 
for(var i = 0;i < words.length;i++){ 
    if(document.getElementById('top').value == words[i]){ 
var error = document.getElementById('error'); 
error.style.display = 'block'; 
     return false; 
    } 
} 
    for(var i = 0;i < words.length;i++){ 
    if(document.getElementById('bottom').value == words[i]){ 
var error = document.getElementById('error'); 
error.style.display = 'block'; 
     return false; 
    } 
} 
    return true; 
} 

と参照

HTML: 
<form method="get" action="test.html" id="formdate" class="formdate" onsubmit="return wordcheck()"> 

<input name="top" type="text" id="top" placeholder="top"> 

<input name="bottom" type="text" id="bottom" placeholder="bottom"> 

<button id="button" type="submit">Enter</button> 

<div id="error" > 
sorry try again 
</div> 


CSS: 
#error { 
color:red; 
display: none; 
margin-bottom: 10px; 
text-align: center; 
} 

のHTMLありがとうございます！

Answer 1

はあなたのコードに問題がライン要素を表すElementオブジェクトを返しますdocument.getElementById

document.getElementById('error').style.display = 'block'; 

でなければなりません

document.getElementById('error').css('display','block'); 

である

function check() { 
var banned = ['january','January','11:03pm','11:03PM']; 
if(document.getElementById('date').value.length < 8){ 
    var error = document.getElementById('error'); 
    error.style.display = 'block'; 
      return false; 
     } 
if(document.getElementById('time').value.length < 8){ 
    var error = document.getElementById('error'); 
    error.style.display = 'block'; 
      return false; 
     } 
     return true; 
} 

Answer 2

このコードを試してみてください。 .css(key,val)構文は、jQueryによって返されるオブジェクト用です。この場合、jQueryで要素にアクセスしていないので、style.displayプロパティを変更する必要があります。 HTMLElement.style

文字列が文字列の配列に含まれているかどうかを確認するには、banned.indexOf(str) != -1を試してください。 this SO questionを参照してください。