ansaurus

Question

Javascript to prevent invalid user input

Answer 1

+1 A:

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>

RC 2010-02-14 14:51:05

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.

Stick it to THE MAN 2010-02-14 15:51:12

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.

Shoko 2010-02-14 16:03:50

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

RC 2010-02-14 16:45:29

Thanks for the example. I understand what I need to do now.

Stick it to THE MAN 2010-02-14 17:07:48

ansaurus

tags:

views:

answers:

Javascript to prevent invalid user input

related questions