Jump to content

Form Validation not working


Klyx99
Go to solution Solved by Psycho,

Recommended Posts

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
Link to comment
Share on other sites

  • Solution

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);"/>
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.