javascript form validation - value length and list of blocked words

Question

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!

A tip for future questions: include any error messages you get, as these are very useful to people seeking to help you. — qxz, Aug 07 '16 at 01:18

score 0 · Accepted Answer · answered Aug 07 '16 at 00:57

0

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

answered Aug 07 '16 at 00:57

gibbles

26
4

You should edit your answer to include what was wrong and how you fixed it (i.e. `getElementById` returns a raw element, not jQuery object) – qxz Aug 07 '16 at 01:03
Wow that finally worked! thank you!! I guess the problem was with the error lines.. ughh all this time.. Ok so now that part is working, what about the banned words? How can I implement that into the script so each input is checked if one of those words are typed? – wolfttp Aug 07 '16 at 01:03
@wolfttp This question may help: http://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript – qxz Aug 07 '16 at 01:05
Ok I read that post qxz, it was helpful and I figured it out, check out my original post, I edited it with all the correct code. its kinda long bloated, im sure there could be short cuts? But atleast its working as I desired it. – wolfttp Aug 07 '16 at 01:22

score 0 · Answer 2 · edited May 23 '17 at 12:00

The problem with your code is in the lines

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

which should be

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

document.getElementById returns an Element object representing the element. The .css(key,val) syntax is for an object returned by jQuery; in this case, since you aren't accessing the element with jQuery, you need to modify the style.display property. See HTMLElement.style

To check if a string is contained in an array of strings, try banned.indexOf(str) != -1. See this SO question.

javascript form validation - value length and list of blocked words

2 Answers2