Email Validation bug for non-english characters

Wappler General Bugs
1

Hey people of Wappler,

With some recent testing of our Single Page Application, I have noticed that, upon trying different email validations, using wappler's built in email validation will allow non-english characters to be submitted in a form requiring validation.

Wappler will display that it is invalid - with the text box becoming red with a danger symbol. But yet it will not fail the validation when submitting.

The input box is set to email type, with the validation rules being email. As well as a server side validation of email, and a further validation step, also validating the input is a valid email.

I am more than happy to use a regex expression to solve this issue for myself, however I believe this is a bug within the wappler validation. As it can clearly pick up it is invalid on client side, yet still submits and passes checks.

If anybody can share the regex / validation the built in validation uses, but could also please look into the bug and provide some clarity?

<input id="inp_email" name="email" type="email" class="form-control mb-3" data-rule-email="" dmx-bind:placeholder="{{EmailPlaceholder.value}}" required="" minlength="1" data-msg-minlength="Please enter at least 11 characters.">

Thanks in advance,
Tom

2

For the email inputs we're using the standard HTML5 validation. I don't think unicode characters are supported there:

If you want to support such characters in an input, you need to set its type to text and use a custom regex pattern to match what you need.

3

Hi @Teodor

Thanks for a swift reply. Thank you for clarifying the validation type as HTML5.

My only other query is why the input box is showing that the input is invalid, yet still proceeding with submission of the form? (in my video)

4

How did you check that? Do you see an actual form submission in the Dev tools > Network > XHR?

5

Hi @Teodor ,

Yes so the form is linked to a server action, which then creates a POST request to an external API. Which (along with some other stuff), will add the email to our database and create an automatic email with an OTP.

This is also show in the XHR dev tools panel. Showing a server 200, backed up by the database record.

So therefore, my concern for the bug is the client side is displaying it knows it's invalid, yet will proceed with running the server action, passing the validation in the server action, and then still sending the invalid email to our API.

6

Not sure i understand what you are doing exactly.
Please post your form code here.

7 
<dmx-value id="steps" dmx-bind:value="1"></dmx-value>
<main class="mt-auto mb-auto pt-5 pb-5">
    <div class="container mt-5 mb-auto pb-5" id="startProccessContainer" dmx-show="steps.value==1">
        <form id="startprocess" is="dmx-serverconnect-form" method="post" action="/api/apiStartProcess" dmx-on:error="notifies1.danger()" dmx-on:success="steps.setValue(2)" dmx-on:submit="preloader1.show()" dmx-on:unauthorized="notifies1.warning(lastError.response)">
            <input id="product_id" name="product_id" class="form-control" type="hidden" readonly="true">
            <input id="product_name" name="product_name" class="form-control" type="hidden" dmx-bind:value="regcode.data.regcode" readonly="true">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-7 col-xl-5 col bg-body-secondary border-2 rounded-2 border border-primary-subtle align-self-center">
                    <div class="row justify-content-start">
                        <div class="col text-center mt-1">
                            <h1 class="text-center">{{FormTitleA.value}}</h1>
                            <p class="text-center">{{FormBodyAA.value}}</p>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-danger">
                            <small id="bs5-form-group-help1" class="form-text text-muted">Enter Your Email Address</small>*
                            <input id="inp_email" name="email" type="email" class="form-control mb-3" data-rule-email="" dmx-bind:placeholder="{{EmailPlaceholder.value}}" required="" minlength="1" data-msg-minlength="Please enter at least 11 characters.">
                        </div>
                    </div>
                    <div class="row mt-1 pb-3">
                        <div class="col-break w-100 text-center"><button id="startprocess_submit" class="btn btn-primary w-50 mt-3" dmx-bind:disabled="!inp_email.value||steps.value!=1" type="submit">{{SubmitButton.value}} (Send OTP)</button></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="container mt-5 mb-auto pb-5" id="otpContainer" dmx-show="steps.value==2">
        <form id="otp" is="dmx-serverconnect-form" method="post" action="/api/apiCheckOTP" dmx-on:success="notifies1.success('Successfully Logged In');Expired.setValue(3);browser1.goto('/RegistrationCheckVRM')" dmx-on:error="notifies1.warning(lastError.response)" dmx-on:unauthorized="notifies1.danger('Incorrect one time password. Please verify the code is correct via your email and try again.')" dmx-on:submit="preloader1.show()">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-7 col-xl-5 col bg-body-secondary border-2 rounded-2 border border-primary-subtle align-self-center">
                    <div class="row justify-content-start">
                        <div class="col text-center mt-1">
                            <h1 class="text-center">{{FormTitleB.value}}</h1>
                            <p class="text-h3 text-center">{{FormBodyBA.value}}</p>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-danger">
                            <small id="bs5-form-group-help2" class="form-text text-muted">Enter Your OTP (One Time Password)</small>*
                            <input id="OTP" name="OTP" class="form-control mb-3" placeholder="OTP" minlength="6" maxlength="6" dmx-on:input="OTP.validate()" required=""><input id="ChallengeCode" name="ChallengeCode" type="text" class="form-control visually-hidden" dmx-bind:value="startprocess.data.ChallengeCode">
                        </div>
                    </div>
                    <div class="row mt-1 pb-3">
                        <div class="col-break w-100 text-center"><button id="btn2" class="btn btn-primary w-50 mt-3" dmx-bind:disabled="OTP.value.length()!=6||steps.value!=2" type="submit">{{SubmitButton.value}}(Verify)</button></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</main>

This is the code for the client side login / otp page.
(form titles, heading, placeholders etc come from a language pack)

8

Ok i see what you mean, the input is marked as invalid when a unicode character like è is entered but the actual validation is not triggered, so it doesn't stop the form from submitting.

@patrick will check this.

10

Yes exactly. Thank you for your help!

11

Hi @patrick ,

Have you had any chance to take a look at this issue?

Thanks, Tom

12

Patrick is off this week, he will be back on Monday. We will let you know once we check the issue.

1 Like
13

Hi @Teodor and @patrick

Any chance i can bring some attention to this ticket please?

Thanks