Search code examples
htmlregexonchangekeyup

how frequently pattern attribute will be validating the text entered in html input


when i am doing a input field validation using pattern , how frequently the value will be validated . i would like to know whether it will validate on (keyup) or (change)

for ex:

<input type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
                    title="{{emailAddress}}" #email="ngModel" multiple
                    pattern="^(([a-zA-Z0-9_,.]*@*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
                    class="form-control" />

i would like to know whether the text i enter will be validated on each keystroke ?


Solution

  • The pattern attribute is checked only upon submission the form or when you press enter on the input tag, so only on the enter key's stroke you might say.

    If you want it to be validated on every keypress, keyup or onchange, you can set the corresponding attribute to validate the input like so:

    <input keyup="validate(this)" />
    
    ...
    
    <script>
    function validate(x)
    {
        regex = /[a-zA-Z0-9]+/;
        window.alert(x.value.match(regex) == null);
    }
    </script>