wolfttp wolfttp - 3 months ago 15
HTML Question

javascript form validation - value length and list of blocked words

Ok this problem has been solved!!! thanks guys, following is the original question so you know what I was trying to achieve, maybe this will help in the future someone else
....Essentially when people submit the form, I want the script to check that the value lengths of the input are at least a certain number. And also that the user didn't type a certain EXACT word. If they typed one of the banned words exactly, or if they entered a value that is not enough characters then I want the script to fail, to not send the input values, and instead display an error message by changing a div's CSS display from none to block.

And here is the updated working 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;
}


And the html for reference

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;
}


Thank you!

Answer

Try this code

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;
}
Comments