CODEWITHSUNDEEP
javascriptregex
Edwin Lambregts
Edwin Lambregts

Reputation: 408

JS regex being skipped?

I'm trying to validate a field for a subject which I will later POST and use while sending an email with mail().

So far I've got the regex done, edited an existing piece of Javascript with field-validation from a former intern, added a pattern in my HTML-inputfield and wrote a small server-sided PHP/regex validation on the next page. It seems to work fine at first look, but when I remove the pattern in my inputfield (done by inspect element with Chrome), the Javascript check is completely skipped and my form is posted. Only due to the server-sided check I am returned to the previous page.

Here's some of the code I use:

Javascript

<script type="text/javascript">
    if($.browser.msie || navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)
    {
        jQuery(function(){
            $("#submit").click(function(){
            $(".error").hide();

            var hasError = false;
            var onderwerpReg = /^[a-zA-Z0-9_]{4,20}[^\/'"<>;]*$/;
            var onderwerpVal = $("#subject").val();

            if (onderwerpVal == '')
            {
                $("#subject").html('<br/><span class="error">Vul een onderwerp in.</span>');
                var hasError = true;
            }
            else if (!onderwerpReg.test(onderwerpVal))
            {
                $("#subject").html('<br/><span class="error">Onderwerp bevat gefilterde karakters.</span>');
                var hasError = true;
            }
            if (hasError == true)
                return false;
            });
        });
    }
</script>

HTML

<input type="text" id="subject" name="subject" size="30" placeholder="Onderwerp" required aria-required="true" pattern="^[a-zA-Z0-9_]{4,20}[^\/'&quot;<>;]*$"/>

My question is: how is it possible that my piece of Javascript is being skipped? Am I not loading it correctly? Is the Javascript plain wrong? On the other side, it works on other forms on my website so I thought I would just stick to validation fields in the same way.

Upvotes: 0

Views: 86

Answers (2)

C3roe
C3roe

Reputation: 96306

As Loamhoof already said, your JS code is not executed in chrome.

but when I remove the pattern in my inputfield (done by inspect element with Chrome), the Javascript check is completely skipped

The pattern attribute has nothing to do with your JavaScript.

It is part of the HTML5 specification to have form fields validated by the browser itself directly, without any scripting.

So your JavaScript code here is actually just a fallback solution for Internet Explorers, which do not implement HTML5 form field validation yet. (Maybe IE 10 does, but <= 9 definitively not.)

As for your question, whether it’d be harmful if this validation via JS was disregarded – no, not actually “harmful” if you validate your data server-side (which you absolutely always have to do). Having the client-side validation is just a matter of user friendliness, because it spares the user the trouble of submitting a form that is not filled out correctly already, only to get server-side generated error messages on the next page. Whether you want to keep this script to offer this extra comfort feature to the user when they are using IE, or if you are OK with it only working the HTML5 way in modern browsers, that’s up to you.

Upvotes: 0

Loamhoof
Loamhoof

Reputation: 8293

I may be wrong but... if($.browser.msie || navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1). The check's done only if you're using IE or Safari.
I'm not sure, but it may be that the browser prevents from sending a form with an error (pattern not matching), so he did that to check only for the browsers that don't support the pattern attribute (it's not much of a problem as anyway the user can do whatever he wants to skip the validation in JS). Again, I'm not sure about that.

Edit:
About the part of sending forms with an error. I've tested, you can only send it if it matches the pattern (or is an empty string, but there's the required attribute for that).

Upvotes: 1

Related Questions