Form Validation not working

[Klyx99]

I cannot get this to fail when entering a non valid character

 

cannot get the following to work (I use FFox). I did search around, and found most of this code on various search results - I am not fluent in JS (yet thus why I am slowly implementing into some of my projects).

 

   function checkInput() {        
            var user_input = document.getElementById('char_name').value;
            
            var notgood = "!\"·$%&/()=?¿@#¬";
            
            if ( 
notgood.test( user_input ) )
            {
                document.getElementById('submitlink').removeAttribute('disabled');
                
            }else{
                document.getElementById('submitlink').setAttribute('disabled','disabled');
                document.getElementById('badInput').innerHTML = 'Bad Input';
                document.signup.char_name.focus();
                Alert('Cannot use that character');
                
            }        
        }

the line it is targeting:
 

    <input type="text" name="char_name" value="" id="char_name" required=""  onblur="checkInput();"/>

Working with pure javascript not jquery.

ignore the disabled/not disabled

The issue I am having, is when testing, it will not alert on bad character. it accepts the input.

 

I tested this by inserting an alert in both conditions, it only acknowledges the accepted and moves on - even if I put one of those characters in there.

Also, how can I check versus an empty space to add to that list?

Edited February 15, 2017 by Klyx99

[Psycho]

I'll just say that what you are doing is probably not needed and (if you don't have similar validation on the back end) completely useless.

 

However, your problem is that your current "test" is trying to see if the value contains the entire string of "!\"·$%&/()=?¿@#¬". You need to create a regular expression patter to look for any character.

 

Plus, I suspect one of your other lines in the failure scenario is failing, probably this one

 

document.signup.char_name.focus();

 

You should pass the form element by reference to the function instead of using getElementById()

 

Also, you should use the onchange event - otherwise the logic will get caught in an infinite loop. When the alert is displayed, the act of the user clicking the OK will initiate another onblur event.

 

 

function checkInput(inputObj) {        
var user_input = inputObj.value;
var notgood = /[!"·$%&\/()=?¿@#¬]/;
 
if ( !notgood.test(user_input) )
{
        document.getElementById('submitlink').removeAttribute('disabled');
        document.getElementById('badInput').innerHTML = '';
        return true;
    }
    else
    {
        document.getElementById('submitlink').setAttribute('disabled','disabled');
        document.getElementById('badInput').innerHTML = 'Bad Input';
        alert('Cannot use that character');
        inputObj.focus();
        return false;
    }        
}

 

 

<input type="text" name="char_name" value="" id="char_name" required=""  onchange="checkInput(this);"/>

[Klyx99]

Hi

I do have a backend for this, however I was attempting to migrate a lot of the little stuff before it went there - on aspect was just getting rid of the unwanted characters before it is sent.

the line

document.signup.char_name.focus();

is (i thought) more cosmetic - as I wanted the cursor back on the input where the error occurred. Not good?

 

The onchange I mixed up with VB, VBA and other languages I do, where it changes per character typed, so I used onblurr as it (i thought ) triggered when focus was lost.

 

However, with all that said and the appropiate changes, this seemed to work as expected - TYVM!!

cheers!

[Psycho]

 . . .  I wanted the cursor back on the input where the error occurred. Not good?

 

It depends on the user workflow. When there are multiple fields needing validation, I would find it more preferable to do the validation on the form submission as opposed to triggering an error on each individual field separately.