Form validation if user submits a specific phrase-CodePudding

in the process of adding a sign up form to a website. The form will have first name, last name, and email text fields.

I want the form to also have a text string field that needs to have a specific phrase/code that was emailed to the customer. This specific phrase/code needs to be entered in order to submit the form (like the first name, last name and email it is a required field).

Wondering if someone is able to help with some JS that will set an alert if this specific phrase/code is not entered, or is incorrect when trying to submit the form?

My current form input fields:

<label for="FirstName">First Name</label>
<input type="text" id="FirstName" name="FirstName" required>
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<label for="Email">Email</label>
<input type="email" id="Email" name="Email" required>
<label for="Code">Code</label>
<input type="text" id="Code" name="Code" required>
<input type="submit" value="Submit">

The id="Code" is the one that I need to make sure that the correct phrase/code is entered. For now, let's make the specific phrase/code: VENDOR2022

If this code is not entered, or the code is entered incorrectly a JS alert will show on submit.

Any help is appreciated. Thanks in advance.

CodePudding user response：

You will need a server side script to be able to compare the code you have sent by email to the one entered in your form.

In some of my e-commerce projects, I offer discount codes such as your VENDOR2022, and I need to ask my database to validate it. In some cases, the code has a deadline (available for the next week, for example). That means the user will not use it immediately, he may closes your app before the day he finally uses it.

The same way you compare Username / Password on sign in, you may compare the discount code as the last step before your shopping cart became an order.

I use PHP / MySQL. I would love to help you out with source code, but I don't know what you are using as back-end technologies...

CodePudding user response：

Ok, this seems to work ok, but still exposed via inspect if someone really wanted to find it.

Submit button will show if the proper code is entered.

$(document).ready(function() {
    var $submit = $('.btn-submit');
    $submit.hide();
    $("#Code").on("change", function() {
        if ($(this).val() == "VENDOR2022") {
            $submit.show();
        } else {
            $submit.hide();
        }
    });
});