Javascript to prevent invalid user input

Question

I have written a set of javascript functions that allow me to validate user input on a form. I only want to accept valid input, and impose the following behaviour:

When a user enters an invalid form, I display an alert and inform them that the value entered is incorrect. Crucially, the original (valid) value in the form is not changed.

The value is only changed when the value has been validated.

For example, suppose I want to accept only positive integers in a field.

This is the sequence of events that describes the desired behaviour.

Scenario 1 (valid input)

Form loads with valid default in the input field
User types in valid number
Input field value is updated (as per normal form behaviour)

Scenario 2 (INvalid input)

Form loads with valid default in the input field
User types in INvalid number
Alert box is shown alert('Invalid value')
Input field value is NOT CHANGED (i.e. the value is the same as BEFORE the user typed in the invalid number)

[Edit]

The only problem I am facing at the moment (i.e. what this question is seeking an answer for), is Scenario 2, action point 4. More specifically put, the question degenerates to the following question:

How do I stop the value of a field from changing, if I (somehow) determine that the value being entered by the user is invalid. This is really, all I'm trying to answer.

I am also doing server side checks, this question is just about the front end - i.e. refusing to change a field (form text input) value if I determine that the value is incorrect.

BTW, I am using jQuery, and would like to implement this in a manner that separates behaviour from display (I think this is what is meant by the term 'unobtrusive' ?)

Any suggestions on how to implement this behaviour as described above, would be very much appreciated.

PS: I dont want to use yet another jQuery plugin for this. I should be able to use jQuery + the simple javascript validation functions I have already written.

You will probably annoy the user if he gets an alert box every time he mistypes or enters wrong values as this changes focus. I would go with a notification next to the field. — Felix Kling
– Felix Kling, Commented Feb 14, 2010 at 14:33
Yeah, you're probably right. But since I dont want the value to change (I want to keep the old CORRECT value), maybe I can just change the background color of the input field (to indicate it was not accepted), while keeping the old value. On the other hand if the value was accepted, I think it would be cool to change the color of the background (to another color) to indicate it was accepted. I think it would be useful if the color change lasts for a few seconds before going back to white, to serve as a visual clue. I hope someone reads this comment and shows how to do something like that :) — Stick it to THE MAN
– Stick it to THE MAN, Commented Feb 14, 2010 at 14:45
You shouldn't only change colors to indicate an error: always use descriptive error messages as well (e.g., above the invalid input). — Marcel Korpel
– Marcel Korpel, Commented Feb 14, 2010 at 14:58
By the way, don't rely on JavaScript for validation: it might be turned off/not available at all. Always check input at the server side, too! — Marcel Korpel
– Marcel Korpel, Commented Feb 14, 2010 at 15:00

RC. · Accepted Answer · 2010-02-14 16:39:41Z

2

When loading the page, couldn't you create a hidden form value or js variable in which you store the initial/default value for the field? When they change the form field, validate it, and if it passes, update the hidden field or js variable to match that in the field they updated.

When the input given by the user fails validation, show the invalid entry along with the error message and then update the form field back to the value you have saved which would be either the default value or the last valid value that they entered.

EDIT:
Note that this is only a quick and (very) dirty example of doing what I explained in my answer above. If you have a lot of inputs, you will probably want to store the values in an associative array instead of in hidden form values, but this should give you a good handle on what I am suggesting. I would also strongly encourage you to NOT use alert boxes for notification of invalid answers.

<html>
<head>
<script type="text/javascript">
    function validate()
    {
        var field1 = document.getElementById("field1");
        var saved  = document.getElementById("field1_save");
        if (field1.value < 0 || field1.value > 10)
        {
            alert("Field1 value of " + field1.value + " is invalid");

            // Change the value back to the previous valid answer
            field1.value = saved.value;
            return false;
        }

        // Save the valid input
        saved.value = field1.value;
        return true;
    }
</script>
</head>

<body>
Test User Input

<form name="form1"   id="form1" method="post">
<input name="field1" id="field1" type="text" value="2" onblur="validate();"/>
<input name="field1_save" id="field1_save" type="hidden" value="2" />

<input name="btnSubmit" type="submit" value="Submit" />                             
</form>
</body>
</html>

edited Feb 14, 2010 at 16:39

answered Feb 14, 2010 at 14:51

RC.

28.4k10 gold badges80 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stick it to THE MAN Over a year ago

I think I did not make myself clear enough in my original question. I will edit my question to clarify further, where my problem lies. Specifically, the question is only concerned with Scenario2, behavior 4.

Tola Odejayi Over a year ago

I don't see why RC's solution doesn't answer your question. After all, you have to (1) allow the current value in the edit field to change as the user inputs data, and (2) determine that the user has finished inputting data before you can carry out validation. Of course, you might want to validate for each character that the user inputs, rather than waiting for him to finish, in which case your javascript validation function would be called in the onChange event of the edit field rather than in the onBlur event.

RC. Over a year ago

I have updated my answer with an example. Hopefully this answers your question more directly.

Collectives™ on Stack Overflow

Javascript to prevent invalid user input

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related