Jump to content


Photo

Form Validation not working


Best Answer Psycho, 15 February 2017 - 05:45 PM

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);"/>
Go to the full post


  • Please log in to reply
3 replies to this topic

#1 Klyx99

Klyx99
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 15 February 2017 - 05:22 PM

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 by Klyx99, 15 February 2017 - 05:29 PM.


#2 Psycho

Psycho
  • Moderators
  • Advanced Member
  • 11,838 posts
  • LocationCanada

Posted 15 February 2017 - 05:45 PM   Best Answer

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);"/>

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#3 Klyx99

Klyx99
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 16 February 2017 - 12:20 AM

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!



#4 Psycho

Psycho
  • Moderators
  • Advanced Member
  • 11,838 posts
  • LocationCanada

Posted 16 February 2017 - 02:30 PM

 . . .  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.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users