How to create Form validation error message at runtime?

Question

I have been searching for hours trying to find a way to validate my form while the user is typing. for example, I want have a field for zip code. I want the user to see a message underneath the field that says they have gone beyond the limit of characters for this field but before they submit the form. How can this be done?

with such code:

<form method="POST" name="wrriregistration" target="_blank"><center>
<table width="100%">
<tbody>
<tr>
<td width="149"><strong>*First Name:</strong></td>
<td width="229"><input type="text" name="first_name" size="35" maxlength="100"/></td>
<td width="123"><strong style="display:none;">Middle Initial:</strong></td>
<td width="659"><input style="display:none;" type="text" name="middle_initial" size="35" maxlength="50" /></td>
</tr>
</tbody>
</table>
</form>

You will need javascript for that, it is not a php functionality. — coderodour
– coderodour, Commented Jul 21, 2016 at 18:40
The maxlength attribute will take care of users trying to enter too many characters. If it's validation that can be done just based on what's present on the form, you can just use simple Javascript to check the field using either they keyup, keypress or change events. If you need to validate against something on the back-end, you'll need to use AJAX. — Dissident Rage
– Dissident Rage, Commented Jul 21, 2016 at 18:41
Okay thank you. How so? Also could you explain why it is not php functionality? — Jose Ortiz
– Jose Ortiz, Commented Jul 21, 2016 at 18:42
for complete form validation, u may see this. formvalidator.net/#reg-form — Robin Panta
– Robin Panta, Commented Jul 21, 2016 at 18:44

score 2 · Accepted Answer · 2016-07-22 08:04:42Z

2

Try this :

HTML

<input type="text" name="first_name">
<div id="error">
    My custom error
</div>

CSS

#error {
    display: none;
}

#error.show {
    display: block;
}

input {
    color: #000000;
}

.invalid {
    color: #FF0000;
}

JS

var input = document.querySelector('[name="first_name"]');
var error = document.getElementById('error');

input.addEventListener('keydown', function(){
    // Whatever you want
    if(this.value.length >= 10) {
        this.classList.add('invalid');
        // You can control style of your invalid input with .invalid
        error.classList.add('show'); // Display your custom error
    } else {
        this.classList.remove('invalid');
        error.classList.remove('show');
    }
});

EDIT Explanation :

var input target your first_name input

addEventListener makes a event detection. Passed with argument 'keydown', JavaScript will listen to keys pressed.

classList is an API to manipulate classes (not supported by IE).

Try it here : https://jsfiddle.net/e3oe4ykf/

edited Jul 22, 2016 at 8:04

answered Jul 21, 2016 at 18:45

user6599592

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

3 Comments

Jose Ortiz Over a year ago

Thank you very much for the response, I will try this out. I have read the above comment with this same implementation.

Jose Ortiz Over a year ago

how can I get the length of one of those fields?

Jose Ortiz Over a year ago

I am sorry but could you further explain how to implement? I've tried it many ways and cannot get it to run. I am just trying to warn users when character are surpassed on the name field

Collectives™ on Stack Overflow

How to create Form validation error message at runtime?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related